当前位置: 首页 > 编程笔记 >

深入理解Javascript中的this关键字

壤驷文华
2023-03-14
本文向大家介绍深入理解Javascript中的this关键字,包括了深入理解Javascript中的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了。

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

 类似资料:
  • 本文向大家介绍深入理解java中this关键字的使用,包括了深入理解java中this关键字的使用的使用技巧和注意事项,需要的朋友参考一下 一,表示类中属性 1,没有使用this的情况 运行结果: 姓名:null,年龄:0; 可以得出结论:此时并没有正确将内容赋给属性; 假设身边有一只笔,远处也有一只笔,肯定会就近拿身边的笔。这在构造方法中一样。 所以此时操作的name,age都是构造方法中定义的

  • 本文向大家介绍深入理解Javascript中this的作用域,包括了深入理解Javascript中this的作用域的使用技巧和注意事项,需要的朋友参考一下 大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的。对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环

  • 本文向大家介绍图解JavaScript中的this关键字,包括了图解JavaScript中的this关键字的使用技巧和注意事项,需要的朋友参考一下 JavaScript 是一种脚本语言,支持函数式编程、闭包、基于原型的继承等高级功能。JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思。其中JavaScript 中

  • 本文向大家介绍this 关键字的理解?相关面试题,主要包含被问及this 关键字的理解?时的应答技巧和注意事项,需要的朋友参考一下 this关键字用于引用类的当前实例。 例如: 在上面的示例中,this关键字用于两个地方: this.employees.length:访问类Manager的当前实例的变量。 this.report():调用类Manager的当前实例的方法。 此关键字是可选的,这意味

  • 本文向大家介绍javascript中this关键字详解,包括了javascript中this关键字详解的使用技巧和注意事项,需要的朋友参考一下 不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法。强烈推荐。 以下篇幅有点长,希望读者耐心阅读。 以下内容会分为如下部分: 1.涵义   1.1:this涵义   1.2:this指向的可变性 2.使用

  • 本文向大家介绍深入理解Javascript箭头函数中的this,包括了深入理解Javascript箭头函数中的this的使用技巧和注意事项,需要的朋友参考一下 首先我们先看一段代码,这是一个实现倒数功能的类「Countdown」及其实例化的过程: 运行这段代码时,将会出现异常「this._step is not a function」。 这是Javascript中颇受诟病的「this错乱」问题:s