javascript--this机制

  this在javascript中很常见同时也是种比较复杂的机制,正确地了解this并且学会正确使用,可以让我们写出更高效、优雅的代码。

  this是在代码运行时进行绑定的,并不在编写时,它的上下文环境取决于韩式调用时的各种条件。this的绑定和函数声明的位置没有任何的关系,只取决于函数的调用方式。

this的四种绑定规则

1、默认绑定

 function foo(){
        console.log(this.a);
   }
   var a = 2;
   foo();           //2

调用foo()时,内部的this会指向全局对象,应用了this的默认绑定

但是,如果实在严格模式下的话,this就是指向了undefined了

2、隐式绑定

function foo(){
        console.log(this.a);
   }

   var obj = {
        a : ‘3‘,
        foo : foo      
   }
   obj.foo();      //3

声明对象obj,属性foo是引用了函数foo,当obj.foo()调用时,隐式绑定规则会把函数调用的this绑定到这个obj上下文对象

3、显式绑定

function foo(){
        console.log(this.a);
   }

    var obj2 = {
        a : 4
    }

    foo.call(obj2);    //4

通过foo.call()可以在调用foo时强制把它的this绑定到obj上

4、new绑定

function baz(a){
    this.a = a
}
var bar = new baz(5);
console.log(bar.a);

使用new关键字调用函数会发生什么操作在上篇博文也有介绍到,构造出一个新对象并把它绑定到baz调用中的this上

判断this规则

我们可以按照以下的规则来判断this是应用了哪个规则:

1、函数是否在new中调用?是的话this绑定的是新创建对象

var bar = new foo();

2、函数是否通过call、apply显式绑定?是的话this绑定了指定对象

foo.call(obj);

3、函数是否在某个上下文调用隐式绑定,是的话this绑定那个上下文对象

obj.foo()

4、如果都不是的话,this则应用了默认绑定

绑定例外

当我们把null和undefined作为this的绑定对象传入call、apply时,这些值会被忽略,实际上是应用了默认绑定

function foo(){
        console.log(this.a);
   }
   var a = 2;
   foo.call(null);           //2

  

如果文中有出现错误的地方,欢迎大家指正

时间: 2024-12-08 20:46:06

javascript--this机制的相关文章

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae

Atitit.js javascript异常处理机制与java异常的转换.js exception processVoae 1. 1. javascript异常处理机制 1 2. 2. Web前后台异常的统一处理 1 3.  java异常转换为js异常 1 3. -------------详细代码 2 1. 1. javascript异常处理机制 Throw str Not throw error  ..cause ie,ff error obj is diff.. 2. 2. Web前后台异常

Atititjs javascript异常处理机制与java异常的转换.js exception process

Atititjs javascript异常处理机制与java异常的转换.js exception process 1. javascript异常处理机制 Throw str Not throw error  ..cause ie,ff error obj is diff.. 2. Web前后台异常的统一处理 不个java异常转换成个js异常走ok... 作者:: 老哇的爪子 Attilax 艾龙,  EMAIL:[email protected] 转载请注明来源: http://blog.csd

重温Javascript继承机制

原文:http://mozilla.com.cn/post/21667/ =========================== 上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网

javascript delete机制学习

想了解delete的机制缘起一个现象,我无法解释,也无法理解. 首先看一下下面这个例子: ? 1 2 var x = 1; delete x; //false 然后我又执行了一次: ? 1 2 y = 2; delete y; //true 看到上面的结果,我比较吃惊,为什么同样是删除,区别怎么这么大呢?进而我想学习和了解一下JS delete的机制. 在MDN(Mozilla Developer Network)上看到下面一个例子 ? 1 2 3 4 5 6 7 8 9 10 11 12 13

JavaScript运行机制

JavaScript运行机制单线程的,也就是说在同一时刻不能执行多个任务于是就出现了setTimeout定时器 文章来源:http://www.laruence.com/2009/09/23/1089.html

【JavaScript】重温Javascript继承机制

上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网络浏览器——Navigator0.9版诞生在网景公司(Netscape),极为轰动.但是,Navigator0.9只能用来浏览,不

[解惑]JavaScript事件机制

[解惑]JavaScript事件机制 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会总结下问题的结论,顺便说说相关知识的扩展~ 如果贸然回答还会冒泡,这不太好的,稍微严谨点考虑 0级 DOM 事件模型的话,这个答案是否定的.但是在 2级 DOM 事件模型中,答案是肯定的,这个问题值得探讨记录下. 本文地址:http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html 一.

我看朴灵评注阮一峰的《JavaScript 运行机制详解:再谈Event Loop》

阮一峰和朴灵对我来说都是大牛,他们俩的书我都买过,阮老师的译作<软件随想录>和朴灵的<深入浅出node.js>.这个事情已经过了4个月了,所以我拿来讲应该也没啥问题. 这件事情是这样的,阮一峰在自己的博客写了篇文章<JavaScript 运行机制详解:再谈Event Loop>,然后朴灵看见了,发现了很多问题,然后在印象笔记又写了篇文章<[朴灵评注]JavaScript 运行机制详解:再谈Event Loop>,由于印象笔记现在已经不能访问了(尼玛也太烂了)

JavaScript 运行机制详解

JavaScript 运行机制详解——转载: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另