Javascript的this详解(2)

3、.bind() (硬绑定是常见场景,故es5提供了该内置方法 Function.prototype.bind。)
bind()会返回一个新编码函数,把this绑定在指定参数上,并调用函数。

举个栗子:

function foo(e) { console.log(this.a + e); return this.a + e; }; var obj = { a: 2 } var bar = foo.bind(obj); //新编码函数 var b = bar(3); // 2 3 console.log(b); // 5

bind()还有一个功能:将除了第一个用于绑定this的参数之外的其他参数传给下层的函数(部分应用,是“柯里化”的一种)。

这里涉及到一个概念:把null或者undefined作为this的绑定对象传入call、apply、bind,这些值在调用的时候会被忽略,实际应用默认绑定规则。
应用场景:

1、使用apply()展开一个数组,并作为参数传递给一个函数。

2、bind()对参数进行柯里化(预先设置一些参数)。

举个栗子:

function foo(a,b) { console.log("a:" + a + ",b:" + b); }; //数组“展开”成参数 foo.apply(null,[2,3]); //a:2,b:3 //bind()柯里化 var bar = foo.bind(null,2); bar(3); //a:2,b:3

解析:传入一个参数作为this绑定对象,如果不传则使用占位符(null),此时会使用默认绑定规则。

上面这个例子可能会产生一定的副作用,如果需要运用这种场景并且更加安全。可以创建一个空对象(可以用任意喜欢的名字来命名)。

var ∅ = Object.create(null); //上面这个例子就可以改写为: foo.apply(∅,[2,3]); //a:2,b:3 var bar = foo.bind(∅,2); bar(3); //a:2,b:3

注意:硬绑定之后不能使用隐式绑定和显式绑定对this进行修改
在这里介绍一种软绑定的方法softBind(),检查this绑定到全局对象或者undefined后,绑定this到指定的默认对象。绑定后效果和硬绑定一样,但是保留隐式绑定或者显式绑定修改this的能力。

四、new绑定

Javascript中的new机制与面向类语言的完全不同。在Javascript中,构造函数只是一些使用new操作符时被调用的函数,不属于一个类,也不会实例化一个类。称为对函数的“构造调用”。

举个栗子:

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

使用new的过程会创建一个全新的对象,this会绑定这个新对象。如果函数没有返回其他对象,则new表达式函数调用会返回该新对象。(这个新对象会连接prototype)

四种绑定规则的优先级为:new>显式>隐式>默认

箭头函数

箭头函数是根据外层作用域(函数或全局)来决定this。(词法作用域取代this机制)
箭头函数this会绑定调用时的对象,且箭头函数的绑定无法修改(new也不行)。

其实可以理解为,箭头函数的this在词法上继承的是它所在的作用域(函数或全局)的this,而它继承的函数作用域的this绑定的是在该函数调用上下文对象,所以箭头函数的this间接的绑定在调用上下文对象。

简述: 箭头函数this(绑定作用域this)-- 作用域this(绑定在调用上下文对象)。

故:箭头函数this == 调用的上下文对象

举个栗子:

function foo() { setTimeout(function() { //这里的this在词法上继承自foo() console.log(this.a); },100); }; var obj = { a: 2 }; foo.call(obj); //2

其实这个栗子也等价于:

function foo() { var that = this; //lexical capture of this setTimeout(function() { console.log(self.a) },100); } ...与上面一样

所以,有两种风格:this风格(四种规则)和词法作用域风格(that = this和箭头函数)可供使用。使用时尽量避免混用,否则会造成难以维护的后果。

以上所述是小编给大家介绍的Javascript的this的作用详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

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

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