JavaScript中this的绑定
this指向问题
在javascript
中this
绑定有以下几种方式
默认绑定
function foo(){console.log(this.a);
}
var a = 1;
foo(); // 1
以上绑定代码即为this的默认绑定,当函数没有其他绑定时,此时this指向window对象;
隐式绑定
隐式绑定需要考虑的是调用位置是否有上下文对象.如下代码所示:
function foo(){console.log(this.a);
}
var obj = { a:'obj',foo:foo
}
obj.foo(); // obj
在上述代码中foo
函数作为一个值被赋予到了obj
对象的foo
属性中,此时的this
指向obj
这个对象,调用时
打印的this.a
为obj.a
为obj;再如下代码
function foo() {console.log(this.a);
}
var obj2 = {a: 'obj2',foo: foo
}
var obj1 = {a: 'obj1',obj2: obj2
}
obj1.obj2.foo(); // obj2
foo
函数是obj2
中foo
属性的值,上述代码中obj1
通过调用自己的obj2
属性来调用obj2.foo
,打印出的值是obj2
,可见对对象属性引用链中只有上一层或者说是最后一层在调用位置起作用
隐式丢失
在隐式绑定中存在隐式丢失这个问题,被隐式绑定的函数会丢失其隐式绑定对象,也就是说此时函数会应用默认绑定,从而把this绑定到全局对象或者undefined
上,取决于是否为严格模式;
function foo() {console.log(this.a);
}
function doFoo(fn) {fn();
}
var obj = {a: 'obj',foo: foo
}
var a = 'global this';
doFoo(obj.foo); // global this
doFoo.call(window,obj.foo); // global this
在上述代码中调用doFoo
传入obj.foo
此时fn=obj.foo
(在AO对象中)可以看作一个隐式赋值,此时doFoo
的this
指向window
,所以打印出来golbal this
如果把函数传入语言内置的函数而不是自己声明的函数,结果是一样的,比如setTimeout
函数:
setTimeout(obj.foo,100); // global this
// 伪代码如下
// function setTimeout(fn,delay) {// // 等待delay
// fn();
// }
显示绑定
显示绑定可以借助call
,apply
函数完成,代码如下:
function foo(){console.log(this.a)
}
var obj = {a:'obj'
}
foo.call(obj); // obj
foo.apply(obj); // obj
通过调用call
或apply
可以在调用foo
时前置把它的this
绑定到obj
上;
在这里还有个概念装箱
:如果传入了一个原始值(字符串类型,布尔类型或者数字类型)来当做his的绑定对象,这个原始值会被转换成它对应的对象形式(new String()
…).
但显示绑定也无法解决丢失绑定的问题,此时显示绑定的一个变种硬绑定可以解决这个问题
硬绑定
function foo() {console.log(this.a);
}
var obj = {a: 'obj'
}
var bar = function () {return foo.call(obj)
}
bar();
在上述代码中创建了一个bar
函数,每次调用bar
都会在obj
上调用foo
这种绑定是一种显示强制绑定,称之为硬绑定.
硬绑定的典型应用场景就是创造一个包裹函数,负责接收参数并返回值,由于硬绑定是一种非常常用的模式,所以es5
提供了内置方法Function.prototype.bind
,应用方法如下
function foo(something) {console.log(this.a + something);
}
var obj = {a: 'obj'
}
foo.bind(obj)(' something'); // obj somehing
bind
会返回一个硬编码的函数,它会把指定参数者只为this
上下文并调用原始函数;
new绑定
function foo(a){this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2
使用new
调用foo
时会构造一个新对象并把它绑定到foo
调用中的this
上.new
是最后一种可以影响函数调用时this
绑定行为的方法.
读《你不知道的JavaScript 上卷》笔记记录
JavaScript中this的绑定相关推荐
- 浅谈 javascript 中的this绑定问题
javascript语言是在运行时前即进行编译的,而this的绑定也是在运行时进行绑定的.也就是说,this实际上是在函数被调用时候发生绑定的,它指向什么完全取决于函数在哪里被调用. 1.默认绑定 例 ...
- JavaScript中事件的绑定与解绑
目录 零.码仙励志 一.事件的绑定 1. 对象.on事件名字=事件处理函数 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false); 3. ...
- JavaScript中,this的绑定规则
对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点. 比如下面的代码,this 指向就有三种方式. 在<你不知道的 JavaScript>一书中,我总算比较清 ...
- JavaScript中this的五种绑定方式详解
1 this的五种绑定方式 1.1 默认绑定 默认绑定是指当函数调用时,没有为其指定对象上下文,此时会将该函数的this绑定到全局对象(window对象).自ES5有了严格模式之后,默认绑定方式又分为 ...
- wpf绑定 dictionary 给定关键字不再字典中_为什么要在 JavaScript 中学习函数式编程?...
请忘掉你认为你知道的有关 JavaScript 的任何东西,以初学者心态来接触这份资料. 为帮助你这样做,我们打算从头开始复习 JavaScript 的基础知识, 就好像你以前从来没有看到过 Java ...
- JavaScript函数调用中的this绑定
这几天看书看到关于JavaScript中this绑定问题,因此想在基础上试着自己总结一下内容,加深理解.前端小白,欢迎探讨指正 this的绑定规则 默认绑定 函数作为对象属性执行(即隐式绑定) 函数通 ...
- JavaScript中绑定事件监听函数的通用方法[ addEvent() ]
上篇文章讲到了事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,一下是 ...
- JavaScript中几个不常用的绑定事件
目录 一.fullscreenchange事件 二.pagehide事件 三.pageshow事件 四.hashchange事件 五.online事件 六.offline事件 七.popstate事件 ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- JavaScript中的面向对象程序设计
本文内容目录顺序: 1.Object概念讲述: 2.面向对象程序设计特点: 3.JavaScript中类和实例对象的创建: 4.原型概念: 5.原型API: 6.原型对象的具体使用:7.深入理解使用原 ...
最新文章
- 火狐浏览器设置cookie失败_IE、谷歌Cookie记录失败,火狐成功(IE和Firefox下的Cookie兼容问题)...
- Tungsten Fabric SDN — for Akraino Based Network Edges
- DOS命令下Javac命令不能执行原因
- git常用命令之stash
- 基于注解的AOP实现事务控制及问题分析
- flex 各组件对应的样式属性2
- 1.数据湖deltalake初识
- RTK、IMU、RT3000
- !--[if IE 9] ![endif]--
- 2017ACM/ICPC亚洲区沈阳站 C Hdu-6219 Empty Convex Polygons 计算几何 最大空凸包
- 治病花了130万才明白:不要轻易买保险
- 《Python程序设计》——1.2 程序开发周期
- 可以分屏的软件_Screen分屏软件下载|Screen+专业分屏 免费版v1.4.25 下载
- 中国料斗秤行业市场供需与战略研究报告
- android studio开启multiDexEnabled后依然出现超出方法数的问题
- Java安全生态-Java加解密API详解-Java安全框架官方文档翻译:对称/非对称加密、数字签名、数字证书、安全通信、密钥库等
- [莫队算法 线段树 斐波那契 暴力] Codeforces 633H Fibonacci-ish II
- c语言change函数用法,通过值和引用函数
- 青龙面板薅羊毛教程之矿二代每日保底1R
- 计算机桌面怎么设置时钟,怎么用DesktopDigitalClock设置电脑桌面时钟
热门文章
- 【人工智能】人工智能如何影响社会经济:关于近期文献的一个综述
- Scrapy创建项目报错Scrapy – no active project,Unknown command解决办法
- 优雅编程之项目注意这些,你就“正常”了(十七)
- html毕业答辩ppt模板范文,答辩ppt模板|答辩总结范文
- 谷尼国际软件-企业竞争情报系统
- 网页编程html报错502,Nginx将不会使用自定义502错误页面
- mybatis-plus使用和原理剖析之逻辑删除
- FaceBook 遭遇有史以来全球最大宕机
- 【AI简报20210625期】自动驾驶运动预测挑战赛、20美元的宜家台灯算力有多强?...
- python RGB转HSV 阴影识别