JavaScript this绑定过程深入详解(3)

我们来看看这个变种到底是怎样工作的。我们创建了函数bar(),并在它的内部手动调用了foo.call(obj),因此强制把foo 的this 绑定到了obj。无论之后如何调用函数bar,它总会手动在obj 上调用foo。这种绑定是一种显式的强制绑定,因此我们称之为硬绑定。

硬绑定的典型应用场景就是创建一个包裹函数,传入所有的参数并返回接收到的所有值:

function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = function() { return foo.apply( obj, arguments ); }; var b = bar( 3 ); // 2 3 console.log( b ); // 5

另一种使用方法是创建一个i 可以重复使用的辅助函数:

function foo(something) { console.log( this.a, something ); return this.a + something; } // 简单的辅助绑定函数 function bind(fn, obj) { return function() { return fn.apply( obj, arguments ); }; } var obj = { a:2 }; var bar = bind( foo, obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5

由于硬绑定是一种非常常用的模式,所以在ES5 中提供了内置的方法Function.prototype.bind,它的用法如下:

function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = foo.bind( obj ); var b = bar( 3 ); // 2 3 console.log( b ); // 5

bind(..) 会返回一个硬编码的新函数,它会把参数设置为this 的上下文并调用原始函数。

2. API调用的“上下文”

第三方库的许多函数,以及JavaScript 语言和宿主环境中许多新的内置函数,都提供了一个可选的参数,通常被称为“上下文”(context),其作用和bind(..) 一样,确保你的回调函数使用指定的this。

举例来说:

function foo(el) { console.log( el, this.id ); } var obj = { id: "awesome" }; // 调用foo(..) 时把this 绑定到obj [1, 2, 3].forEach( foo, obj ); // 1 awesome 2 awesome 3 awesome

这些函数实际上就是通过call(..) 或者apply(..) 实现了显式绑定,这样你可以少些一些代码。

4.new绑定

这是第四条也是最后一条this 的绑定规则,在讲解它之前我们首先需要澄清一个非常常见的关于JavaScript 中函数和对象的误解。在传统的面向类的语言中,“构造函数”是类中的一些特殊方法,使用new 初始化类时会调用类中的构造函数。通常的形式是这样的:

something = new MyClass(..);

JavaScript 也有一个new 操作符,使用方法看起来也和那些面向类的语言一样,绝大多数开发者都认为JavaScript 中new 的机制也和那些语言一样。然而JavaScript 中new 的机制实际上和面向类的语言完全不同。

首先我们重新定义一下JavaScript 中的“构造函数”。在JavaScript 中,构造函数只是一些使用new 操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上,它们甚至都不能说是一种特殊的函数类型,它们只是被new 操作符调用的普通函数而已。

举例来说,思考一下Number(..) 作为构造函数时的行为,ES5.1 中这样描述它:

Number 构造函数

当Number 在new 表达式中被调用时,它是一个构造函数:它会初始化新创建的对象。

所以,包括内置对象函数(比如Number(..))在内的所有函数都可以用new 来调用,这种函数调用被称为构造函数调用。这里有一个重要但是非常细微的区别:实际上并不存在所谓的“构造函数”,只有对于函数的“构造调用”。使用new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。

1. 创建(或者说构造)一个全新的对象。
2. 这个新对象会被执行[[ 原型]] 连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象,那么new 表达式中的函数调用会自动返回这个新对象。

思考下面的代码:

function foo(a) { this.a = a; } var bar = new foo(2); console.log( bar.a ); // 2

使用new 来调用foo(..) 时,我们会构造一个新对象并把它绑定到foo(..) 调用中的this上。new 是最后一种可以影响函数调用时this 绑定行为的方法,我们称之为new 绑定。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/e7eaced083c29dbae42ca8343d738199.html