this 的4种绑定机制
为什么要用this:
function identify() {console.log("Hello,I'm " + this.name);
}
let me = {name: "Kyle"
};
let you = {name: "Reader"
};
identify.call(me); // Hello,I'm Kyle
identify.call(you); // Hello,I'm Reader
这个简单的栗子,可以在不同的对象中复用函数identify
,不用针对每个对象编写一个新函数。
this解决的问题:
this提供了一种更优雅的方法来隐式'传递'一个对象的引用,因此可以将API设计得更加简洁并且易于复用。
this的四种绑定规则:
默认绑定:
规则:在非严格模式下,默认绑定的this
指向全局对象,严格模式下this
指向undefined
function foo() {console.log(this.a); // this指向全局对象
}
var a = 2;
foo(); // 2
function foo2() {"use strict"; // 严格模式this绑定到undefinedconsole.log(this.a);
}
foo2(); // TypeError:a undefined
默认绑定规则如上述栗子,书中还提到了一个微妙的细节:
function foo() {console.log(this.a); // foo函数不是严格模式 默认绑定全局对象
}
var a = 2;
function foo2(){"use strict";foo(); // 严格模式下调用其他函数,不影响默认绑定
}
foo2(); // 2
所以:对于默认绑定来说,决定this绑定对象的是函数体是否处于严格模式,严格指向undefined,非严格指向全局对象。
通常不会在代码中混用严格模式和非严格模式,所以这种情况很罕见,知道一下就可以了,避免某些变态的面试题挖坑。
隐式绑定:
规则:函数在调用位置,是否有上下文对象,如果有,那么this就会隐式绑定到这个对象上。
function foo() {console.log(this.a);}var a = "Oops, global";let obj2 = {a: 2,foo: foo};let obj1 = {a: 22,obj2: obj2};obj2.foo(); // 2 this指向调用函数的对象obj1.obj2.foo(); // 2 this指向最后一层调用函数的对象// 隐式绑定丢失let bar = obj2.foo; // bar只是一个函数别名 是obj2.foo的一个引用bar(); // "Oops, global" - 指向全局
隐式绑定丢失:
隐式绑定丢失的问题:实际上就是函数调用时,并没有上下文对象,只是对函数的引用,所以会导致隐式绑定丢失。
同样的问题,还发生在传入回调函数中,这种情况更加常见,并且隐蔽,类似:
test(obj2.foo); // 传入函数的引用,调用时也是没有上下文对象。
显式绑定:
就像我们上面看到的,如果单纯使用隐式绑定肯定没有办法得到期望的绑定,幸好我们还可以在某个对象上强制调用函数,从而将this
绑定在这个对象上。
规则:我们可以通过apply
、call
、bind
将函数中的this
绑定到指定对象上。
function foo() {console.log(this.a);
}
let obj = {a: 2
};
foo.call(obj); // 2
传入的不是对象:
如果你传入了一个原始值(字符串,布尔类型,数字类型),来当做this的绑定对象,这个原始值转换成它的对象形式。
如果你把null
或者undefined
作为this的绑定对象传入call
/apply
/bind
,这些值会在调用时被忽略,实际应用的是默认绑定规则。
new绑定:
书中提到:在js中,实际上并不存在所谓的'构造函数',只有对于函数的'构造调用'。
new的时候会做哪些事情:
- 创建一个全新的对象。
- 这个新对象会被执行 [[Prototype]] 连接。
- 这个新对象会绑定到函数调用的this。
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
规则:使用构造调用的时候,this会自动绑定在new期间创建的对象上。
function foo(a) {this.a = a; // this绑定到bar上
}
let bar = new foo(2);
console.log(bar.a); // 2
this四种绑定规则的优先级
如果在某个调用位置应用了多条规则,如何确定哪条规则生效?
obj.foo.call(obj2); // this指向obj2 显式绑定比隐式绑定优先级高。new obj.foo(); // thsi指向new新创建的对象 new绑定比隐式绑定优先级高。
显式绑定和new绑定无法直接比较(会报错),默认绑定是不应用其他规则之后的兜底绑定所以优先级最低,最后的结果是:
显式绑定 > 隐式绑定 > 默认绑定
new绑定 > 隐式绑定 > 默认绑定
箭头函数的this指向不会使用上述的四条规则:
function foo() {return () => {console.log(this.a);};
}
let obj1 = {a: 2
};
let obj2 = {a: 22
};
let bar = foo.call(obj1); // foo this指向obj1
bar.call(obj2); // 输出2 这里执行箭头函数 并试图绑定this指向到obj2
从上述栗子可以得出,箭头函数的this规则:
- 箭头函数中的
this
继承于它外面第一个不是箭头函数的函数的this
指向。 - 箭头函数的 this 一旦绑定了上下文,就不会被任何代码改变。
作者:OBKoro1
链接:https://juejin.im/post/5b3715def265da59af40a630
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
转载于:https://www.cnblogs.com/hhj3645/p/9256911.html
this 的4种绑定机制相关推荐
- SimpleApp例程中两种绑定机制程序流程
来自:http://hi.baidu.com/wangh0802/item/97fd93f869bfa8c60cd1c8ea 建立一个绑定表格有3种方式: (1)ZDO绑定请求:一个试运转的工具能告诉 ...
- 绑定机制(转自天运科技)
一.绑定(Binding) 绑定是一种控制两个或者多个设备应用层之间信息流传递的机制.在ZigBee2006发布版本中,它被称为源绑定,所有的设备都可以执行绑定机制. 绑定允许应用程序发送一个数据包而 ...
- 引用内部函数绑定机制,R转义字符,C++引用,别名,模板元,宏,断言,C++多线程,C++智能指针
1.引用内部函数绑定机制 #include<iostream> #include<functional> usingnamespacestd; usingnamespac ...
- 你不知道的js中关于this绑定机制的解析[看完还不懂算我输]
前言 最近正在看<你不知道的JavaScript>,里面关于this绑定机制的部分讲的特别好,很清晰,这部分对我们js的使用也是相当关键的,并且这也是一个面试的高频考点,所以整理一篇文章分 ...
- 验证码(Captcha)的两种校对机制
文章目录 前言 两种验证机制 状态验证码 无状态验证码 前言 Captcha,中文全称为全自动区分计算机和人类的图灵测试,在实际使用中常常以验证码的形式出现在人们的视野中,即通过展示一张图片,要求用户 ...
- C++中的两种绑定方式(静态绑定、动态绑定)
两种绑定方式 静态绑定:在编译时刻,根据指针或引用变量的静态类型来决定成员函数属于哪一个类. 动态绑定:在运行时刻,根据指针或引用变量实际指向或引用的对象类型(动态类型)来确定成员函数属于哪一个类. ...
- 数据事务四种隔离机制和七种传播行为
数据事务四种隔离机制和七种传播行为 一.隔离级别: 数据库事务的隔离级别有4个,由低到高依次为Read uncommitted.Read committed.Repeatable read.Seria ...
- JDK/Dubbo/Spring 三种 SPI 机制,谁更好?
点击关注公众号,Java干货及时送达 来源:juejin.cn/post/6950266942875779108 SPI 全称为 Service Provider Interface,是一种服务发现机 ...
- 一文看懂 Bahdanau 和 Luong 两种 Attention 机制的区别
来自 | 知乎 作者 | Flitter 链接 | https://zhuanlan.zhihu.com/p/129316415 编辑 | 深度学习这件小事公众号 本文仅作学术交流,如有侵权,请联系 ...
最新文章
- 【Big Data - Hadoop - MapReduce】通过腾讯shuffle部署对shuffle过程进行详解
- druid sql黑名单 报异常 sql injection violation, part alway true condition not allow
- boost::fusion::flatten_view用法的测试程序
- xp和win7安装telnet服务
- 情报领域因果推理智能项目概览:以DAPAR为例
- android dp sp px_规范|iOS与Android设计规范解析(一)
- 将asp.net1.1的应用程序升级到asp.net2.0的一点心得
- mysql sql时间比较_mysql和sql时间 字段比较大小的问题
- JAVA运算的类型兼容原则_Java基础语法回顾(一)
- POJ 3069 Saruman's Army (贪心)
- Inkscape将位图转换为矢量图
- linux tftp 下载命令,Linux tftp命令
- python数据分析水果_用python解决简单的水果分类问题
- python求15 17 23 65 97的因数_32个常用的Python功能介绍
- hibernate操作步骤(代码部分)
- FFMPEG,vlc介绍和视频直播,obs(zz)
- 企业微信品牌私域运营案例合集
- 数据挖据---机器学习平台之H2O架构/接口/实践
- html4和html5的区别
- 淘宝线上线下“出淘”欲打造零售业航母
热门文章
- springBoot的一些注解以及静态资源的处理
- threejs球体旋转与场景旋转_three.js实现围绕某物体旋转
- SSM运行异常 org.springframework.beans.factory.UnsatisfiedDependencyException
- 计算机采用逻辑元件的发展顺序是,全国计算机等级考试一级选择题以及答案
- php7链接数据库报错The server requested authentication method unknown to the client
- div 高度等与html,html – 仅限CSS – 基于兄弟的div的高度
- php模板引擎smarty,[PHP]模板引擎Smarty介绍
- 计算器小程序java课程设计,java课程设计----计算器小程序报告.doc
- java session失效之后跳转,session失效后如何实现页面不跳转到主页而是跳转到session失效时的页面...
- mysql 处理文件函数_mysql数据处理与函数