关于js中的this
从字面上理解this就是本身,所以this的指向就是本身,关键就是搞清楚本身指的是什么。
首先这个本身不是指函数本身,也不是指函数的词法作用域。
this是在函数调用时发生的绑定,它的指向完全取决于函数是如何调用的。当一个函数被调用时,就会创建一个活动记录(或者说是执行上下文),这个记录会包含函数在哪里调用、函数的调用方式(接下来会讲到)、传入的参数等信息,而this就是这个记录的一个属性。
接下来讲函数的4种调用方式,同时这4种方式也决定了this的4种绑定方式。
1 默认绑定
也许你已经知道在全局下定义的变量默认就成为了window的属性,比如你在全局下定义了 var a = 2;那么你可以通过window.a访问到a的值。对于函数也是一样,但是要注意的是,这个机制在全局下是会报错的。
2 隐式绑定
这是语言中很常见的一种绑定
function foo(){
console.log(this.a);
}
var obj = {
a:2,
foo:foo,
}
var obj2 = {
a:42,
obj1:obj1
}
obj.foo;//2
obj2.obj1.foo //2
需要注意的是隐式丢失的问题
思考以下代码
function foo(){
console.log(this.a);
}
var obj = {
a:2,
foo:foo,
}
var bar = obj.foo;
var a = "200";
bar() //200
这里边有一个赋值操作:var bar=obj.foo,使得bar成为obj.foo的一个引用,但是bar引用的就是foo这个函数,bar并没有隐式的上下文,因此便采用了默认上下文window。
另一种比较微妙的但也很常见的一种情况是函数作为参数传递时。
function foo(){
console.log(this.a);
}
function doFoo(fn){
fn()
}
var obj = {
a:2,
foo:foo,
}
var a="200"
doFoo(obj.foo); //200
在参数传递时,其实发生了隐式的赋值操作,即fn = obj.foo,所以本质上和上例一样。js中的ajax和setTimeout等函数都有函数作为参数,使用的时候应当注意。
3 显示绑定
显示绑定可以使我们更加自由的将函数绑定到特定的上下文。js中的绝大多数函数都会有call和apply方法(极少数没有),你可以利用call或者apply显式的指定函数的执行上下文,它们的区别只是传入的参数不同。
还有一个bind,用法相似,也是常用的一种绑定方式
function foo(){
console.log(this.a);
}
var obj = {
a:2,
}
fn.call(obj) //2
关于两者区别这里就不多说了。
4 new绑定
大家都知道new是用来调用构造函数的,但是在js中并不存在真正的构造函数,js中任何一个函数都可以被new调用,所以构造一个对象时,真正起构造作用的是new,而不是函数。在《你不知道的JavaScript》中作者是这样讲的“实际上并不存在所谓的‘构造函数’,只有对于函数的‘构造调用’”,大家可以领会一下。
需要理解的是new的过程是怎样的,例如
function Foo(a){
this.a = a;
}
var bar = new Foo(2)
bar.a //2
这个过程可以简单理解为以下4步
1 创建一个全新的对象。
2 这个全新的对象会被执行[[Prototype]]连接。
3 这个全新的对象会绑定this(我觉得就是执行了a = this)
4 默认返回这个对象(前提是这个构造函数没有返回值)
所以在new的第三步执行了this的绑定
箭头函数
ES6中新增了箭头函数的语法,不但更加简洁,而且有的时候可以很好的解决this绑定的问题。箭头函数的语法如下
function foo(){
return (a)=>{
console.log(this.a)
}
}
在箭头函数里是没有this的,所以这里箭头函数中的this实际上是外层的this,箭头函数只是做了一个变量查找的过程。思考以下代码:
function foo(){
return (a)=>{
console.log(this.a)
}
}
var obj1={
a:2
}
var obj2={
a:3
}
var bar = foo.call(obj1)
bar.call(obj2) //2
foo中的箭头函数中的this会捕获调用foo时的this,由于foo的this绑定到obj1,所以bar(引用的是箭头函数)的this也是指向obj1,箭头函数的this 来自于上层,是违法被修改的(new也不会)
关于this的绑定可以参考《你不知道的JavaScript》这本书里边的内容,讲的很深入很具体,同时还讲了几种绑定规则同时使用时的优先级和绑定到null
转载于:https://www.cnblogs.com/hui-fly/p/9459151.html
关于js中的this相关推荐
- 在js中使用HashMap数据结构,在js中使用K,V数据结构
首先是定义一个HashMap方法,做基类(复制在js中即可,然后引用) //简单的哈希表,begin function HashMap() {/** Map 大小 * */var size = 0;/ ...
- [JavaScript] 探索JS中的函数秘密
函数长啥样? 把一些要重复使用的内容封装到函数内. function foo(title) {console.log(title) } foo('title') foo('dust') foo('he ...
- 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
- 在JS中最常看到切最容易迷惑的语法(转)
发现一篇JS中比较容易迷惑的语法的解释,挺有用的,转载下,与大家分享: js中大括号有四种语义作用 语义1,组织复合语句,这是最常见的 Js代码 if( condition ) { //... }e ...
- js去el的map_转:el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容 后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
- js中substr,substring,indexOf,lastIndexOf的用法
js中substr,substring,indexOf,lastIndexOf等的用法 1.substr substr(start,length)表示从start位置开始,截取length长度的字符串 ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调 增加加载进度条 支持JS中alert.confirm.prompt Safari调试 设置 -> safari --> 高级,开启J ...
- 彻底理解js中this
相关博文:http://blog.csdn.net/libin_1/article/details/49996815 彻底理解js中this的指向,不必硬背. 首先必须要说的是,this的指向在函数定 ...
- 彻底理解js中this的指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
最新文章
- 各浏览器中for in顺序的差异
- Java基础:String类
- Python爬取猪肉价格网并获取Json数据
- BZOJ-3173-最长上升子序列
- ITK:将样条曲线拟合到点集
- NOIP赛前模拟20171027总结
- Linux使用ftp传输10g的文件,Ubuntu 16.04 安装ftp服务器传输文件
- Java 数据类型和 MySql 数据类型对应一览表
- 降低人工智能成本50% 阿里云推出新一代异构实例GN5i
- WinCE 5.0下的鼠标键盘驱动分析
- m3u8 ts文件利用系统工具COPY合并序列TS文件
- java楼盘管理系统_课内资源 - 基于Java面向对象开发的房屋中介管理系统
- Screw一键生成数据库文档
- 关注这场直播,了解能源行业双碳目标实现路径
- 通信网络与IP网络底层传输技术梳理(SONET/SDH/OTN/ATM/Ethernet/MPLS/PTN...)
- github干货地址分享
- android+手机运行卡,手机运行卡顿,运行内存太小,在购买的时候就需要注意运行速度...
- 机器视觉(七):图像分割
- C语言中 || \ 符号的意思
- 智慧工厂数字化管理系统软件
热门文章
- html 跳转或打开新网页
- 3.Deep Neural Networks for YouTube Recommendations论文精细解读
- 浙大计算机科学基础题型,浙江大学878计算机学科专业基础(含数据结构)考研复习经验...
- 面试看缘分php,php测试姓名缘分指数
- reg类型变量综合电路_SystemVerilog的一些可综合实用技巧
- raptor算法流程图例题_raptor程序设计例题参考答案
- MySQL 唯一索引 UNIQUE KEY 会导致死锁?
- Spring Boot 2.3 中开启Spring Security
- CALayer( 一 )
- 自动化测试框架:几行代码轻松解决Appium环境问题