深入理解Javascript中的this关键字

 这篇文章主要介绍了深入理解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了。

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

时间: 2024-09-12 13:50:07

深入理解Javascript中的this关键字的相关文章

理解javascript中的with关键字_javascript技巧

说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字,认为不要去管它用它就可以了.但是有时候,我们在看一些代码或者面试题的时候,其中会有with关键字的相关问题,很多坑是你没接触过的,所以还是有必要说说with这一个关键字. 一.基本说明 在js高级程序设计中是这样描述with关键字的:with语句的作用是将代码的作用域设置到一个特定的作用域中,基本

深入理解Javascript中的this关键字_python

自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底是何方神圣? 理解this this是一个与执行上下文(execution context,也就是作用域)相关的特殊对象.因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下 文中被触发的对象). 任何对象都可以做为上下文中的this的值.在一些对ECMAScript执行上下文和部分th

AJAX入门之深入理解JavaScript中的函数

ajax|javascript|函数 概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var f

新手入门:理解JavaScript中函数的使用

javascript|函数 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解. JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-} var func2=function(-){-}; var func3=function func4(-){-}; var func5

深入理解JavaScript中的对象

  这篇文章主要介绍了深入理解JavaScript中的对象,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript是一种面向对象编程(OOP)语言.一种编程语言可以被称为面向对象的,它为开发者提供了四种基本功能: 封装 - 存储相关的信息,无论是数据或方法,还是对象 聚合 - 存储一个对象到另一个对象的内部 继承 - 类的能力依赖于另一个类(或类数),用于其部分的属性和方法 多态性 - 编写函数或者方法,在各种不同的方式工作 对象是由属性.如果属性包含一个函数,它被认为是一个对象

AJAX入门之深入理解JavaScript中的函数_AJAX相关

概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法:  function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var func5=new Function(

图解JavaScript中的this关键字_javascript技巧

JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(

JavaScript中的this关键字使用方法总结

 这篇文章主要介绍了JavaScript中的this关键字使用方法总结,本文讲解了作为对象方法调用.作为函数调用.作为构造函数调用.使用 apply 或 call 调用等内容,需要的朋友可以参考下     在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代. 它可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式.JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用

如何理解 JavaScript 中的 Promise 机制

本文讲的是如何理解 JavaScript 中的 Promise 机制, Promise 的世界 原生 Promises 是在 ES2015 对 JavaScript 做出最大的改变.它的出现消除了采用 callback 机制的很多潜在问题,并允许我们采用近乎同步的逻辑去写异步代码. 可以说 promises 和 generators ,代表了异步编程的新标准.不论你是否用它,你都得 必须 明白它们究竟是什么. Promise 提供了相当简单的 API ,但也增加了一点学习曲线.如果你以前从没见过