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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
ExpressJS入门实例
Jan 14 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
canvas实现图像截取功能
Feb 06 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Promise扫盲贴
Jun 24 Javascript
小程序实现分类页
Jul 12 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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中文字符串截取方法实例总结
2014/09/30 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
大数据分析用java还是Python
2020/07/06 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
安全生产先进个人材料
2014/02/06 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
python glom模块的使用简介
2021/04/13 Python