深入理解Javascript中的this关键字

更新时间：2015年03月27日 16:40:11 投稿：junjie

这篇文章主要介绍了深入理解Javascript中的this关键字,本文讲解了方法调用模式、函数调用模式、构造器调用模式、apply调用模式中this的不同之处,需要的朋友可以参考下

自从接触javascript以来，对this参数的理解一直是模棱两可。虽有过深入去理解，但却也总感觉是那种浮于表面，没有完全理清头绪。

但对于this参数，确实会让人产生很多误解。那么this参数到底是何方神圣？

理解this　　

this是一个与执行上下文（execution context，也就是作用域）相关的特殊对象。因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下文中被触发的对象)。

任何对象都可以做为上下文中的this的值。在一些对ECMAScript执行上下文和部分this的描述中的所产生误解。this经常被错误的描述成是变量对象的一个属性。再重复一次：

this是执行上下文的一个属性,而不是变量对象的一个属性。这个特性非常重要,因为与变量相反,this从不会参与到标识符解析过程。换句话说,在代码中当访问this的时候,它的值是直接从执行上下文中获取的,并不需要任何作用域链查找。this的值只在进入上下文的时候进行一次确定。

废话不多，先看一个板栗：

复制代码代码如下:

var test = function(){};

test.prototype = {
    foo:"apple",
    fun:function(){
        this.foo="banana";
    }
};

var myTest = new test();
myTest.fun();

console.log(myTest.hasOwnProperty("foo")); //输出什么
console.log(myTest.hasOwnProperty("fun")); //输出什么

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

不知道看官们心里的答案是什么，正确的答案是true,false。

复制代码代码如下:

console.log(myTest.hasOwnProperty("foo"));
console.log(myTest.hasOwnProperty("fun"));

true
false

要弄明白为什么是这样，就必须要理解上面this所扮演的角色，所指代的对象。在《javascript语言精粹》一书中，指出了在javascript中一共有四种调用模式：

1.方法调用模式
2.函数调用模式
3.构造器调用模式
4.apply调用模式

而在这些模式当中，对于如何初始化关键参数this上是存在不同差异的。

方法调用模式

当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this被绑定到该对象。注意加粗的这句是重点：

复制代码代码如下:

// 创建myObject。它有一个value属性和一个increment方法

var myObject = {
    value: 0;
    increment: function(inc) {
        this.value += typeof inc ==='number'?inc:1; // 接受一个可选参数，如果不是数字，则默认为数字1
    }
};

myObject.increment();
console.log(myObject.value); // 1

myObject.increment(2); //传入数字2
console.log(myObject.value); // 3

这里，方法increment可以使用this去访问myObject对象，所以可以改变value的值。而且，this到对象的绑定发生在调用的时候。

函数调用模式

如果一个函数并非一个对象的属性时，那么它被当作一个函数来调用，此时，this被绑定到全局对象，书上说这是js语言设计的一个缺陷。倘若设计正确，当内部函数被调用的时，this应该仍然绑定到外部函数的this变量。抛开对语言设计的正确与否讨论，要当函数调用模式时this变量依旧绑定到该对象，有如下经典解决方案:

复制代码代码如下:

// 给myObject增加一个double方法

var myObject = {
    value: 0;
    increment: function(inc) {
        this.value += typeof inc ==='number'?inc:1; // 接受一个可选参数，如果不是数字，则默认为数字1
    }
};

myObject.increment(2);

myObject.double = function () {
    var that=this; //解决方法

    var helper= function () {
        that.value=add(that.value,that.value);
    };
    helper();
};
myObject.double(); //以方法的形式调用double
console.log(myObject.getValue());   //6

即是给该方法定义一个变量并且把它赋值为this，那么内部函数就可以通过那个变量访问到this，按照约定，给那个变量命名为that。

构造器调用模式

构造器调用模式即是我一开头给出的例子所提到的。如果在一个函数前面带上new来调用，那么将创建一个连接到该函数的prototype成员新对象，同时this将会被绑定到那个新对象上。听上去十分拗口且难以理解，先再看个demo：

复制代码代码如下:

//构造一个名为Quo的构造器函数，带有一个status属性的对象

var Quo = function(string){
this.status =string;
};

Quo.prototype.get_status = function(){
return this.status;
}

var myQuo =new Quo("confuse"); //构造一个Quo实例

console.log(myQuo.get_status()); //confuse

简单来说，Quo对象下的this在被用为构造一个新实例即new时，this指代的是新生成的myQuo对象而不是Quo对象本身。

一句话，重点就是：原型中的this不是指的原型对象，而是调用对象。

再回过头看一开始的demo，就很好理解了，在执行myTest.fun()时，this指代了myTest对象，所以生成了一个foo属性值为“banana”，所以myTest.hasOwnProperty("foo")返回值为true。

Apply调用模式

因为javascript是一门函数式面向对象编程语言，所以函数可以拥有方法。apply方法让我们构建一个参数数组并用其去调用其他函数，apply方法接收两个参数，第一个是将被绑定的this的值，第二个是参数数组。说简单直接一点就是apply方法能劫持另外一个对象的方法，继承另外一个对象的属性. 推荐可以看js中apply方法的使用详细解析，就不摆demo了。

学识尚浅，若文中有不正确，请务必指出，误人子弟实乃大过。

您可能感兴趣的文章:

如何让python程序正确高效地并发
这篇文章主要介绍了如何让python程序正确高效地并发，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-06-06
详细解读Python中解析XML数据的方法
这篇文章主要介绍了Python中解析XML数据的方法,是Python入门学习中的基础知识,需要的朋友可以参考下
2015-10-10
python中的super如何使用
这篇文章主要介绍了python中的super,python中的super，名为超类，可以简单的理解为执行父类的__init__函数，本文就着重看下super的具体作用，需要的朋友可以参考下
2022-03-03
python 爬虫出现403禁止访问错误详解
这篇文章主要介绍了 python 爬虫解决403禁止访问错误的相关资料,需要的朋友可以参考下
2017-03-03
python爬虫爬取监控教务系统的思路详解
这篇文章主要介绍了python爬虫监控教务系统，主要实现思路是对已有的成绩进行处理，变为list集合，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2020-01-01
django使用django-apscheduler 实现定时任务的例子
今天小编就为大家分享一篇django使用django-apscheduler 实现定时任务的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-07-07
解决pytorch 的state_dict()拷贝问题
这篇文章主要介绍了解决pytorch 的state_dict()拷贝问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-03-03
Python结合OpenCV和Pyzbar实现实时摄像头识别二维码
这篇文章主要为大家详细介绍了如何使用Python编程语言结合OpenCV和Pyzbar库来实时摄像头识别二维码,文中的示例代码讲解详细,需要的可以参考下
2024-01-01
Python3.6正式版新特性预览
Python3.6计划在2016-12-16正式发布。截止目前，PSF 已经发布了 9 个测试版本。在新版本正式发布之前，我们一起来体验一下都会有哪些重要的新特性。
2016-12-12
python库patchworklib多图表整合用法示例探究
这篇文章主要介绍了python库patchworklib对齐matplotlib图表,将多个图表的整合为单一图表用法示例探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01