JS中this的4种绑定规则详解


Posted in Javascript onFebruary 04, 2020

JS中this是什么

理解this之前, 先纠正一个观点,this 既不指向函数自身,也不指函数的词法作用域。

如果仅通过this的英文解释,太容易产生误导了。

它实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数。也就是说谁调用的this,this就指向谁

JS中this说明

ES6中的箭头函数采用的是词法作用域。

为什么要使用this:使API设计得更简洁且易于复用。

this即不指向自身,也不指向函数的词法作用域。

this的指向只取决于函数的调用方式

this绑定规则

new > 显示绑定 > 隐式绑定 > 默认绑定

默认绑定

当独立函数调用时,不管是否在调用栈中,this都指向全局对象(浏览器中为window)

严格模式下,不能将全局对象用于默认绑定。

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

隐式绑定

当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

对象属性引用链中只有最后一层在调用位置中起作用。

要求:对象内部必须包含一个指向函数的属性,该对象可通过这个属性间接引用函数。

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

隐式丢失

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo; // 这里bar将引用foo函数本身,所以不带有函数对象的上下文
var a = "oops, global"; // a是全局对象的属性
bar(); // "oops, global"

和回调函数的情况下(参数传递时的隐式赋值)

function foo() {
  console.log( this.a );
}
function doFoo(fn) {
  // 参数传递时,相当于fn = obj.foo,就和上个例子一样了
  fn(); // <-- call-site!
}
var obj = {
  a: 2,
  foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"

显式绑定

采用call()和apply(),通过传入一个对象(若为基本类型,会被封装函数转为对象—装箱),将this绑定到该对象。

硬绑定

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2
};
var bar = function() {
  foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬绑定后bar无论怎么调用,都不会影响foo函数的this绑定
bar.call( window ); // 2

硬绑定的典型应用是如下的包裹函数:

function foo(something) {
  console.log( this.a, something );
  return this.a + something;
}
var obj = {
  a: 2
};
var bar = function() {
  return foo.apply( obj, arguments ); // 将obj对象硬编码进去
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5

即将内部函数用apply硬绑定到某个对象,无论怎么调用这个包裹函数,都不会影响内部函数的this。

bind辅助函数如下:

function foo(something) {
  console.log( this.a, something );
  return this.a + something;
}
// simple `bind` helper
function bind(fn, obj) {
  return function() {
    return fn.apply( obj, arguments ); // 利用参数将obj传入进去
  };
}
var obj = {
  a: 2
};
var bar = bind( foo, obj ); // bind( foo, obj )会返回一个包裹函数
var b = bar( 3 ); // 2 3
console.log( b ); // 5

总结:上述包裹函数,想要包裹其他函数,只能一个一个重复写,硬编码的方式导致不能被重用,当某种功能需要多次重复使用时,将其抽象出来,成为函数。

new绑定

任何函数都可能被用作构造函数,当函数被new操作符“构造调用”时,会执行下面操作:

1. 创建一个新对象(若该函数不是JS内置的,则创建一个新的Object对象);

2. 将this绑定到这个对象;

3. 执行构造函数中的代码(为这个新对象添加属性);

4. 若函数没有返回其他对象,则自动返回这个新对象;若函数有return返回的是非对象,则还是自动返回这个新对象,即覆盖那个非对象。

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

补充说明

间接引用

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 = o.foo的返回值是目标函数的引用,所以调用位置是foo(),而不是p.foo()或o.foo()

箭头函数:不使用这四个this规则,根据词法作用域来决定this。

function foo() {
  // 返回一个箭头函数
  return (a) => {
    // `this` here is lexically adopted from `foo()`
    console.log( this.a );
  };
}
var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
// foo()不是箭头函数,他的this被绑定到obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )返回箭头函数,所以bar为箭头函数
bar.call( obj2 ); // 2! 箭头函数的this无法被修改,new也不行

如下为和箭头函数一样的模式:

function foo() {
  var self = this; // lexical capture of `this`
  setTimeout( function(){
    console.log( self.a );
  }, 100 );
}
var obj = {
  a: 2
};

更多关于JS中this对象的相关文章大家可以点击下面的相关链接

Javascript 相关文章推荐
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 #Javascript
Preload基础使用方法详解
Feb 03 #Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 #Javascript
使用preload预加载页面资源时注意事项
Feb 03 #Javascript
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 #Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 #Javascript
You might like
php以post形式发送xml的方法
2014/11/04 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
使用Python进行目录的对比方法
2018/11/01 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python3.6数独问题的解决
2019/01/21 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
硕士研究生求职自荐信范文
2014/03/11 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
邀请函怎么写
2015/01/30 职场文书
多人股份制合作协议书
2016/03/19 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python