88bf必发娱乐JavaScript中this的四个绑定规则总结

前言

JavaScript中this的四个绑定规则总结,javascriptthis

前言

如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅。所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧。

绑定规则

1. 默认绑定

独立函数调用时,this指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定,
this绑定至 undefined

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

严格模式时:

function foo() {
 "use strict";
 console,log(this.a);
}
var a = 2;
foo(); // TypeError: this is undefined

2. 隐式绑定

当函数引用有上下文对象时(即函数作为引用属性被添加到对象中),隐式绑定规则会把函数调用中的
this绑定到这个上下文对象。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2,
 foo: foo
};
obj.foo(); // 2

对象属性引用链中只有最顶层或者说最后一层会影响调用位置:

obj1.obj2.foo(); // foo 中的 this 与 obj2 绑定

2.1 隐式丢失

隐式丢失指的是函数中的 this 丢失绑定对象,即它会应用第 1
条的默认绑定规则,从而将 this绑定到全局对象或者
undefined上,取决于是否在严格模式下运行。以下情况会发生隐式丢失:

绑定至上下文对象的函数被赋值给一个新的函数,然后调用这个新的函数时:

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2,
 foo: foo
};
var bar = obj.foo; //函数别名
var a = "这是全局变量喔";
bar(); // "这是全局变量喔"

传入回调函数时:

function foo() {
 console.log( this.a);
}
function doFoo(fn) {
 fn(); // <-- 调用位置
}
var obj = {
 a: 2,
 foo: foo
};
var a = "这是全局变量喔";
doFoo( obj.foo ); // "这是全局变量喔"

其实这就是第一种情况的变种,实际上参数传递就是一种隐式赋值。除了开发人员自定义的函数,在将函数传入语言内置的函数比如
setTimeout时,同样会发生隐式丢失的情况。

3. 显式绑定

显式绑定的核心是 JavaScript 内置的 call(..)
apply(..)方法,这两个方法在 JavaScript
提供的绝大多数函数以及开发者自己创建的所有函数上都可以使用。

call(..)
apply(..)的第一个参数是一个对象(二者区别在后面传入的参数形式,这里不是重点,不讨论),他们会将
this 绑定到这个对象上。因为你可以直接指定
this绑定的对象,所以这条规则被称为显式绑定。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2
};
foo.call(obj); // 2

如果 call 或者 apply
传入的第一个参数是原始值(字符串类型、布尔类型或者数字类型),那么该原始值会被转换成它的对象形式(new String()
new Boolean()new Number()),俗称“装箱”。

显式绑定仍然无法解决丢失绑定问题。

3.1 硬绑定

作为显式绑定的一个变种,硬绑定可以解决丢失绑定问题。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2
};
var bar = function() {
 foo.call(obj);
};
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); //无效,硬绑定的 bar 不会再修改它的 this

在一个新的函数内部强制绑定
this到某个对象上,无论之后如何调用这个新的函数,其
this都不会丢失。

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

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

或者将绑定的对象改为可配置,这样就成了一个辅助绑定函数:

...
function bind(fn, obj){
 return function(){
 return fn.apply(obj, arguments);
 };
}
...

由于硬绑定实在太过常见,所以 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

3.2 API 调用的“上下文”

JavaScript
自身以及许多第三方库的函数都提供了一个可选的参数,通常被称为“上下文”,其作用和bind(..)一样,确保回调函数使用指定的
this

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

实际上这些函数背后还是调用了 call()或者
apply(),只不过这样开发者需要写的代码就少了一些。

4. new 绑定

使用 new来调用函数时,会自动执行下面的操作:

     1、创建一个全新的对象

     2、这个新对象会被执行 [[原型]] 连接

     3、这个新对象会绑定到函数调用的 this

     4、如果函数没有返回其他对象,那么
new表达式中的函数调用会自动返回这个新对象

举例如下:

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

使用 new来调用 foo(..)时,会构造一个新对象并把它绑定到
foo(..)调用中的 this上。

优先级

具体推断细节不再表述,以上四种绑定规则的使用先后推断如下:

1、函数是否在 new中调用(new绑定)?如果是的话
this绑定的是新创建的对象。

var bar = new foo();

2、函数是否通过
callapply(显示绑定)或者硬绑定?如果是的话,this绑定的是指定的对象。

var bar = foo.call(obj2);

88bf必发娱乐,3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象。

var bar = obj1.foo();

4、如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到
undefined,否则绑定到全局对象。

var bar = foo();

绑定例外

如果把 null或者 undefined作为 this的绑定对象传入
callapply或者
bind,那么这些值在调用时会被忽略,实际应用的是默认绑定规则。(书中推荐使用一个空对象来绑定
this)。

间接引用。这种情况容易在赋值时发生:

function foo() {
 console.log( this.a);
}
var a = 2;
var o = {a: 3, foo: foo};
var p = {a: 4};
o.foo(); // 3
(p.foo = o.foo)(); // 2

p.foo()实际上引用了 foo(),如此,会应用默认绑定。

另外ES6 对改变
this的混乱绑定作了相应的努力,诞生了箭头函数,其根据当前词法作用域来决定
this而非上面的四条规则,具体来说,箭头函数会继承外层函数调用的
this绑定(这其实和 ES6 之前代码中的 self = this 是一个道理)。

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

http://www.bkjia.com/Javascript/1162586.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1162586.htmlTechArticleJavaScript中this的四个绑定规则总结,javascriptthis
前言 如果要问javascript中哪两个知识点容易混淆,作用域查询和 this
机制绝对名列前茅。所以…

如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅。所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧。

绑定规则

1. 默认绑定

独立函数调用时,this指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定,
this绑定至 undefined

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

严格模式时:

function foo() {
 "use strict";
 console,log(this.a);
}
var a = 2;
foo(); // TypeError: this is undefined

2. 隐式绑定

当函数引用有上下文对象时(即函数作为引用属性被添加到对象中),隐式绑定规则会把函数调用中的
this绑定到这个上下文对象。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2,
 foo: foo
};
obj.foo(); // 2

对象属性引用链中只有最顶层或者说最后一层会影响调用位置:

obj1.obj2.foo(); // foo 中的 this 与 obj2 绑定

2.1 隐式丢失

隐式丢失指的是函数中的 this 丢失绑定对象,即它会应用第 1
条的默认绑定规则,从而将 this绑定到全局对象或者
undefined上,取决于是否在严格模式下运行。以下情况会发生隐式丢失:

绑定至上下文对象的函数被赋值给一个新的函数,然后调用这个新的函数时:

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2,
 foo: foo
};
var bar = obj.foo; //函数别名
var a = "这是全局变量喔";
bar(); // "这是全局变量喔"

传入回调函数时:

function foo() {
 console.log( this.a);
}
function doFoo(fn) {
 fn(); // <-- 调用位置
}
var obj = {
 a: 2,
 foo: foo
};
var a = "这是全局变量喔";
doFoo( obj.foo ); // "这是全局变量喔"

其实这就是第一种情况的变种,实际上参数传递就是一种隐式赋值。除了开发人员自定义的函数,在将函数传入语言内置的函数比如
setTimeout时,同样会发生隐式丢失的情况。

3. 显式绑定

显式绑定的核心是 JavaScript 内置的 call(..)
apply(..)方法,这两个方法在 JavaScript
提供的绝大多数函数以及开发者自己创建的所有函数上都可以使用。

call(..)
apply(..)的第一个参数是一个对象(二者区别在后面传入的参数形式,这里不是重点,不讨论),他们会将
this 绑定到这个对象上。因为你可以直接指定
this绑定的对象,所以这条规则被称为显式绑定。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2
};
foo.call(obj); // 2

如果 call 或者 apply
传入的第一个参数是原始值(字符串类型、布尔类型或者数字类型),那么该原始值会被转换成它的对象形式(new String()
new Boolean()new Number()),俗称“装箱”。

显式绑定仍然无法解决丢失绑定问题。

3.1 硬绑定

作为显式绑定的一个变种,硬绑定可以解决丢失绑定问题。

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2
};
var bar = function() {
 foo.call(obj);
};
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); //无效,硬绑定的 bar 不会再修改它的 this

在一个新的函数内部强制绑定
this到某个对象上,无论之后如何调用这个新的函数,其
this都不会丢失。

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

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

或者将绑定的对象改为可配置,这样就成了一个辅助绑定函数:

...
function bind(fn, obj){
 return function(){
 return fn.apply(obj, arguments);
 };
}
...

由于硬绑定实在太过常见,所以 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

3.2 API 调用的“上下文”

JavaScript
自身以及许多第三方库的函数都提供了一个可选的参数,通常被称为“上下文”,其作用和bind(..)一样,确保回调函数使用指定的
this

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

实际上这些函数背后还是调用了 call()或者
apply(),只不过这样开发者需要写的代码就少了一些。

4. new 绑定

使用 new来调用函数时,会自动执行下面的操作:

     1、创建一个全新的对象

     2、这个新对象会被执行 [[原型]] 连接

     3、这个新对象会绑定到函数调用的 this

     4、如果函数没有返回其他对象,那么
new表达式中的函数调用会自动返回这个新对象

举例如下:

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

使用 new来调用 foo(..)时,会构造一个新对象并把它绑定到
foo(..)调用中的 this上。

优先级

具体推断细节不再表述,以上四种绑定规则的使用先后推断如下:

1、函数是否在 new中调用(new绑定)?如果是的话
this绑定的是新创建的对象。

var bar = new foo();

2、函数是否通过
callapply(显示绑定)或者硬绑定?如果是的话,this绑定的是指定的对象。

var bar = foo.call(obj2);

3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象。

var bar = obj1.foo();

4、如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到
undefined,否则绑定到全局对象。

var bar = foo();

绑定例外

如果把 null或者 undefined作为 this的绑定对象传入
callapply或者
bind,那么这些值在调用时会被忽略,实际应用的是默认绑定规则。(书中推荐使用一个空对象来绑定
this)。

间接引用。这种情况容易在赋值时发生:

function foo() {
 console.log( this.a);
}
var a = 2;
var o = {a: 3, foo: foo};
var p = {a: 4};
o.foo(); // 3
(p.foo = o.foo)(); // 2

p.foo()实际上引用了 foo(),如此,会应用默认绑定。

另外ES6 对改变
this的混乱绑定作了相应的努力,诞生了箭头函数,其根据当前词法作用域来决定
this而非上面的四条规则,具体来说,箭头函数会继承外层函数调用的
this绑定(这其实和 ES6 之前代码中的 self = this 是一个道理)。

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章: