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


Posted in Javascript onSeptember 26, 2016

前言

如果要问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 是一个道理)。

总结

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

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
jQuery 选择器(61种)整理总结
Sep 26 #Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 #Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 #Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 #Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 #Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 #Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 #Javascript
You might like
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
jQuery 表格工具集
2010/04/25 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python笔记之facade模式
2019/11/20 Python
python中有帮助函数吗
2020/06/19 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
自荐书范文
2013/12/08 职场文书
商场端午节活动方案
2014/01/29 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
邀请函怎么写
2015/01/30 职场文书
干部考核工作总结
2015/08/12 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
导游词之杭州西湖
2019/09/19 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript