断言

单元测试框架的核心是断言方法,通常叫assert()。

该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述。

如果该值执行的结果为true,断言就会通过;

否则,断言就会被认为是失败的。

通常用一个相应的通过(pass)/ 失败(fail)标记记录相关的信息;

function assert(value, desc) {
  let li = document.createElement('li');
  li.className = value ? 'pass' : 'fail';
  li.appendChild(document.createTextNode(desc));
  document.getElementById('results').appendChild(li);
}

// 断言函数
function assert(value, desc) {
  if (value) {
    console.log(`\033[32m ${desc} \033[0m`);  // 断言通过 绿色字体
  } else {
    console.log(`\033[31m ${desc} \033[0m`);  // 断言失败 红色字体
  }
}

函数

  • JavaScript是一门函数式语言
  • 在JavaScript中,函数是第一型对象。函数可以共处,可以视作为其他任意类型的对象。就像普通的JavaScript数据类型,,函数可以被任意变量进行引用,或声明成对象字面量,甚至可以将其作为函数参数进行传递。
  • 函数是第一型对象
  • 可以通过字面量进行创建。
  • 可以赋值给变量、数组或其他对象的属性。
  • 可以作为参数传递给函数。
  • 可以作为函数的返回值进行返回。
  • 可以拥有动态创建并赋值的属性。
  • 命名一个函数时,该名称在整个函数声明范围内是有效的。如果函数声明在顶层,window对象上的同名属性则会引用到该函数。
  • 所有的函数都有一个name属性,该属性保存的是该函数名称的字符串。匿名函数的name属性值为空。
  • 在JavaScript中,作用域是由function进行声明的,而不是代码块。声明的作用域创建于代码块,但不是终结于代码块(其他语言是终结于代码块的)
if (window) {
  var x = 123;
}
alert(x);

执行代码后,会弹出123,是因为JavaScript在大括号关闭处并没有终止其作用域。

  • 变量声明的作用域开始于声明的地方,结束于函数的结尾,与代码嵌套无关。
  • 命名函数的作用域是指声明该函数的整个函数范围,与代码嵌套无关;
  • 对于作用域声明,全局上下文就像一个包含页面所有代码的超大型函数。
  • 所有的函数调用都会传递两个隐式参数:argument和this

作为函数进行调用

如果一个数不是作为方法、构造器、或者通过apply()或call()进行调用的,则认为它是“作为函数”进行调用的。

function ninja() {};
ninja()

var samurai = function() {};
samurai()
  • 以这种方式调用时,函数的上下文是全局上下文---window对象。

作为方法进行调用

当一个函数被赋值给对象的一个属性,并使用引用该函数的这个属性进行调用时,那么函数就是作为该对象的一个方法进行调用的。

var 0 = {};
o.whatever = function() {};
o.whatever();
  • 将函数作为对象的一个方法进行调用时,该对象就变成了函数上下文,并且在函数内部可以以this参数的形式进行访问。

作为构造器进行调用

  • 将函数作为构造器进行调用,需要在函数调用前使用new关键字

创建一个新的空对象;

传递给构造器都对象是this参数,从而成为构造器的函数上下文;

如果没有显式都返回值,新创建的对象则作为构造器的返回值进行返回。

function Ninja() {
  this.skulk = function() { return this; }
}

var ninja1 = new Ninja();
var ninja2 = new Ninja();

构造器的目的是通过函数调用初始化创建新的对象。

函数调用方式差异

  • 函数调用方式之间点主要差异是:作为this参数传递给执行函数的上下文对象之间点区别。

作为方法调用,该上下文是方法的拥有者;
作为全局函数进行调用,其上下文永远是window(也就说,该函数是window的一个方法)。
作为构造器进行调用,其上下文对象则是新创建的对象实例。

使用apply()和call()方法

  • 通过函数的apply()方法来调用函数,需要给apply()传入两个参数:一个是函数上下文的对象,另一个是作为函数参数所组成的数组;
  • 通过函数的call()方法来调用函数,需要给call()传入两个参数:一个是函数上下文的对象,另一个是作为函数参数的参数列表,而不是单个数组;
function juggle() {
  var result = 0;
  for (var n = 0; n < arguments.length; n  ) {
    result  = arguments[n]
  }
  this.result = result;
}
var ninja1 = {};
var ninja2 = {};

juggle.apply(ninja1, [1,2,3,4]);
juggle.call(ninja2, 5,6,7,8)

assert(ninja1.result === 10, 'juggled via apply');
assert(ninja2.result === 26, 'juggled via call');

使用apply()和call()可以选择任意对象作为函数上下文;

函数总结

函数是第一型对象;

  • 通过字面量进行创建。
  • 赋值给变量或属性。
  • 作为参数进行传递。
  • 作为函数结果进行返回。
  • 拥有属性和方法。

函数是通过字面量进行创建的,其名称是可选的。

在页面生命周期内,浏览器可以将函数作为各种类型的事件处理程序进行调用。

变量的作用域开始于声明处,结束于函数尾部,其会跨域边界(如:大括号)

内部函数在当前函数的任何地方都可用(提升),即便是提前引用。

函数的形参列表和实际参数列表的长度可以是不同的。

  • 未赋值的参数被设置为undefined。
  • 多出的参数是不会绑定到参数名称的。

每个函数调用都会传入两个隐式参数。

  • arguments,实际传入的参数集合。
  • this,作为函数上下文的对象引用。

可以用不同的方法进行函数调用,不同的调用机制决定了函数上下文的不同。

  • 作为普通函数进行调用时,其上下文是全局对象(window)。
  • 作为方法进行调用时,其上下文是拥有该方法的对象。
  • 作为构造器进行调用时,其上下文是新分配的对象实例。
  • 通过函数的apply()或call()方法进行调用时,上下文可以设置成任意值。

匿名函数

为了不让不必要的函数名称污染全局命名空间,可以创建大量的小型函数进行传递,而不是创建包含大量命令语句的大型函数。

递归

  • 递归:当函数调用自身,或调用另外一个函数,但这个函数的调用树中的某个地方又调用到了自己时,就产生了递归。
  • 递归的两个条件:引用自身,并且有终止条件。

闭包

  • 闭包是一个函数在创建时允许自身函数访问并操作该自身函数之外的变量时所创建的作用域
  • 闭包可以让函数访问所有的变量和函数,只要这些变量和函数存在于该函数声明时的作用域内就行。
var outerValue = 'ninja';

var later;


function outerFunction() {

  // 该变量的作用域限制在该函数内部,并且在函数外部访问不到;
  var innerValue = 'samurai';

  // 在外部函数内,声明一个内部函数。
  // 注意:声明该函数时,innerValue是在作用域内的
  function innerFunction() {
    assert(outerValue, 'I can see the ninja');
    assert(innerValue, 'I can see the samurai');

    // 将内部函数引用到later变量上,由于later在全局作用域内,所以可以对它进行调用。
    later = innerFunction;
  }
}

// 调用外部函数,将会声明内部函数,并将内部函数赋值给later变量。
outerFunction();

// 通过later调用内部函数。
// 我们不能直接调用内部函数,因为它的作用域(和innerValue一起)被限制在outerFunction内。
later();

闭包使用场景:私有变量

在构造器内隐藏变量,使其在外部作用域不可访问,但是可以存在于闭包内。

function Ninja() {
  var feints = 0;

  this.getFenits = function() {
    return feints;
  }

  this.feint = function() {
    feints  ;
  }
}

var ninja = new Ninja();

ninja.feint();

assert(ninja.getFenits() === 1, '调用一次,内部变量  ');

assert(ninja.feints === undefined, '函数外部不可访问')

变量的作用域依赖于变量所在的闭包

闭包记住的是变量的引用,而不是闭包创建时刻该变量的值

原型与面向对象

  • 所有的函数在初始化时都有一个prototype属性,该属性的初始值是一个空对象。
  • 使用new操作符将函数作为构造器进行调用的时候,其上下文被定义为新对象的实例。
  • 在构造器内的绑定操作优先级永远高于在原型上的绑定操作优先级。因为构造器的this上下文指向的是实例自身,所以我们可以在构造器内对核心内容执行初始化操作。
  • 通过instanceof操作,可以判断函数是否继承了其原型链中任何对象的功能。

JavaScript函数、闭包、原型、面向对象学习笔记的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios – Swift中的UIView动画不起作用,错误的参数错误

    我正在尝试制作动画并使用下面的代码.我得到“无法使用类型’的参数列表调用’animateWithDuration'(FloatLiteralConvertible,延迟:FloatLiteralConvertible,选项:UIViewAnimationoptions,动画:()–>()–>$T4,完成:(Bool)–>(Bool)–>$T5)’“错误.这意味着我使用了错误的参数.我错了.请

  6. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  7. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  8. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  9. ios – 使用捕获列表中的无主内容导致崩溃,即使块本身也不会执行

    欣赏有关如何调试此内容的任何提示或有关导致崩溃的原因的解释……

  10. ios – Swift传递封闭与Params

    目前我传递一个闭包作为一个对象的属性,该对象不接受参数并且没有返回值,如下所示:到目前为止,这工作得很好.我希望能够在设置此闭包时传入一个参数,以便在MyClass的实例中使用.我正在寻找下面的SOMETHING,虽然我确定语法不正确:我如何将参数传递给可以在MyClass中使用的闭包–即可以在属性本身的didSet部分内使用的值,如第二个示例中所示?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部