深入理解this机制系列第二篇——this绑定优先级
前面的话
上一篇介绍过this的绑定规则,那如果在函数的调用位置上同时存在两种以上的绑定规则应该怎么办呢?本文将介绍this绑定的优先级
显式绑定 pk 隐式绑定
显式绑定胜出
function foo() {
console.log( this.a );
}
var obj1 = {
a: 2,
foo: foo
};
var obj2 = {
a: 3,
foo: foo
};
obj1.foo(); //
obj2.foo(); // 3
//在该语句中,显式绑定call(obj2)和隐式绑定obj1.foo同时出现,最终结果为3,说明被绑定到了obj2中
obj1.foo.call( obj2 ); //
obj2.foo.call( obj1 ); //
new绑定 pk 隐式绑定
new绑定胜出
function foo(something) {
this.a = something;
}
var obj1 = {foo: foo};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); //
obj1.foo.call(obj2,3);
console.log( obj2.a ); //
//在下列代码中,隐式绑定obj1.foo和new绑定同时出现。最终obj1.a结果是2,而bar.a结果是4,说明this被绑定在bar上
var bar = new obj1.foo( 4 );
console.log( obj1.a ); //
console.log( bar.a ); //
new绑定 pk 显式绑定
new绑定胜出
function foo(something) {
this.a = something;
}
var obj1 = {};
//先将obj1绑定到foo函数中,此时this值为obj1
var bar = foo.bind( obj1 );
bar( 2 );
console.log(obj1.a); //
//通过new绑定,此时this值为baz
var baz = new bar( 3 );
console.log( obj1.a ); //
//说明使用new绑定时,在bar函数内,无论this指向obj1有没有生效,最终this都指向新创建的对象baz
console.log( baz.a ); //
顺序
【1】是否是new绑定?如果是,this绑定的是新创建的对象
var bar = new foo();
【2】是否是显式绑定?如果是,this绑定的是指定的对象
var bar = foo.call(obj2);
【3】是否是隐式绑定?如果是,this绑定的是属于的对象
var bar = obj1.foo();
【4】如果都不是,则使用默认绑定
var bar = foo();
深入理解this机制系列第二篇——this绑定优先级的更多相关文章
- 深入理解javascript作用域系列第二篇——词法作用域和动态作用域
× 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极 ...
- 深入理解javascript作用域系列第二篇
前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作 ...
- 深入理解javascript函数系列第二篇——函数参数
× 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
- 深入理解this机制系列第一篇——this的4种绑定规则
× 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅 ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
- 深入理解javascript函数系列第一篇
前面的话 函数对任何一门语言来说都是核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中 ...
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...
随机推荐
- test imetro
haha hahah2 hahah3 hahah4 text int main() { cout << "helloworld" << endl; } pi ...
- 手把手教你搭建深度学习平台——避坑安装theano+CUDA
python有多混乱我就不多说了.这个混论不仅是指整个python市场混乱,更混乱的还有python的各种附加依赖包.为了一劳永逸解决python的各种依赖包对深度学习造成的影响,本文中采用pytho ...
- WEB应用的组成结构
- Flask 重新认识
总是觉的学习东西有点猴子掰玉米的感觉.今天就重新再掰一次吧. Installation: 安装之前建议先安装virtualenv,这个东东是帮助你在多个python版本之间保持同步,不至于python ...
- hexo建个人博客
已经在腾讯云获得了域名和服务器,想着既然已经这样了,就折腾折腾自己的个人博客主页吧. 考虑再三决定用github pages来实现我的博客.github Pages可以被认为是用户编写的.托管在git ...
- php面向对象中的几个基本定义
面向对象: 面向对象是现代编程中的一种重要设计方法,其基本思想是使用对象,类,封装,继承等来进行程序设计. 对象: 一只猪,一只羊,一辆汽车. 类: 类的主要作用就是创建对象. 封装: 类的特点是将对 ...
- 使用html5 地理位置技术 和 百度地图api查询当前位置
使用了 zepto 和 requirejs define(['zepto'],function($){ var geolocation = { init:function(config,onSuc ...
- C语言内存分配
(1)代码区(text segment).存放CPU执行的机器指令(machine instructions).通常,代码区是可共享的 (即另外的执行程序可以调用它),因为对于频繁被执行的程序,只 ...
- 转:隐马尔可夫模型(HMM)攻略
隐马尔可夫模型 (Hidden Markov Model,HMM) 最初由 L. E. Baum 和其它一些学者发表在一系列的统计学论文中,随后在语言识别,自然语言处理以及生物信息等领域体现了很大的价 ...
- ASP.NET vNext 概述
兼容Mono的下一代云环境Web开发框架ASP.NET vNext 我们知道了ASP.NET vNext是一个全新的框架,是一个与时俱进的框架.这篇文章将深入讨论在整体架构更多的细节,文档参照 ASP ...