详解Javascript 中的this指针

简介: Javascript this指针

前言

Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错,进而用错的特性。特别是对于接触静态语言比较久了的同志来说更是如此。

示例说明

我们先来看一个最简单的示例:

<scripttype="text/javascript">

   var name = "Kevin Yang";

   function sayHi(){

      alert("你好,我的名字叫" + name);

   }

   sayHi();

</script>

这段代码很简单,我们定义了一个全局字符串对象name和函数对象sayHi。运行会弹出一个打招呼的对话框,“你好,我的名字叫Kevin Yang”。

我们把这段代码稍微改一改:

<scripttype="text/javascript">

   var name = "Kevin Yang";

   function sayHi(){

      alert("你好,我的名字叫" + this.name);

   }

   sayHi();

</script>

这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。运行结果和上面一摸一样。这说明this.name引用的也还是全局的name对象。

开头我们不是说了,函数也是普通的对象,可以将其当作一个普通变量使用。我们再把上面的代码改一改:

<scripttype="text/javascript">

   var name = "Kevin Yang";

   function sayHi(){

      alert("你好,我的名字叫" + this.name);

   }

   var person = {};

   person.sayHello = sayHi;

   person.sayHello();

</script>

这一次,我们又创建了一个全局对象person,并将sayHi函数对象赋给person对象的sayHello属性。运行结果如下:

这一次打招呼的内容就有点无厘头了,我们发现this.name已经变成undefined了。这说明,在sayHello函数内部执行时已经找不着this.name对象了。如果我们重新定义person对象,在其上面加上一个name属性又会怎么样呢?

var person = {name:"Marry"};

运行代码发现打招呼的“人”变了:

是不是看出点道道了呢?

判别this指针的指导性原则

在Javascript里面,this指针代表的是执行当前代码的对象的所有者。

在上面的示例中我们可以看到,第一次,我们定义了一个全局函数对象sayHi并执行了这个函数,函数内部使用了this关键字,那么执行this这行代码的对象是sayHi(一切皆对象的体现),sayHi是被定义在全局作用域中。其实在Javascript中所谓的全局对象,无非是定义在window这个根对象下的一个属性而已。因此,sayHi的所有者是window对象。也就是说,在全局作用域下,你可以通过直接使用name去引用这个对象,你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name了。

再来看第二个this的示例。我们定义了一个person的对象,并定义了它的sayHello属性,使其指向sayHi全局对象。那么这个时候,当我们运行person.sayHello的时候,this所在的代码所属对象就是sayHello了(其实准确来说,sayHi和sayHello是只不过类似两个指针,指向的对象实际上是同一个),而sayHello对象的所有者就是person了。第一次,person里面没有name属性,因此弹出的对话框就是this.name引用的就是undefined对象(Javascript中所有只声明而没有定义的变量全都指向undefined对象);而第二次我们在定义person的时候加了name属性了,那么this.name指向的自然就是我们定义的字符串了。

理解了上面所说的之后,我们将上面最后一段示例改造成面向对象式的代码。

<scripttype="text/javascript">

   var name = "Kevin Yang";

   function sayHi(){

      alert("你好,我的名字叫" + this.name);

   }

   function Person(name){

       this.name = name;

   }

   Person.prototype.sayHello = sayHi;

   var marry = new Person("Marry");  

   marry.sayHello();

   var kevin = new Person("Kevin");

   kevin.sayHello();

</script>

在上面这段代码中,我们定义了一个Person的“类”(实际上还是一个对象),然后在这个类的原型(类原型相当于C++中的静态成员变量的概念)中定义了sayHello属性,使其指向全局的sayHi对象。运行代码我们可以看到,marry和kevin都成功的向我们打了声“招呼”。

在这段代码中有两点需要思考的,一个是new我们很熟悉,但是在这里new到底做了什么操作呢?另外一个是,这里执行sayHello的时候,this指针为什么能够正确的指向marry和kevin对象呢?

我们来把上面定义“类”和实例化类对象的操作重新“翻译”一下:

<scripttype="text/javascript">

   var name = "Kevin Yang";

   function sayHi(){

      alert("你好,我的名字叫" + this.name);

   }

   function Person(name){

       varthis;

       this.name = name;

       returnthis;

   }

   Person.prototype.sayHello = sayHi;

   var marry = Person("Marry");  

   marry.sayHello();

   var kevin = Person("Kevin");

   kevin.sayHello();

</script>

当然这段代码并不能正确执行,但是它可以帮助你更好的理解这个过程。

当我们使用new关键字实例化一个“类”对象的时候,Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name,实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你,于是就有marry变量得到的对象的name为“Marry”,而kevin变量得到的对象的name属性确实“Kevin”。

显式操纵this指针

在上面的面向对象式编程实例中,我们看到,在使用new操作符的情况下,看起来this的指向和我们前一节中讲到的指导原则并不相符。 this指针并没有指向marry或者kevin的所有者,而是指向marry和kevin变量本身。

实际上,如果你理解什么是指针的话,那么你就会知道,既然是指针,那么当然可以改变其指向的对象。只不过Javascript引擎不允许我们自己写代码来做这样的事情,也就是说,在Javascript中,你不可以直接写this = someObj这样的代码。Javascript引擎通过以下两种方式允许我们显式指定this指针指代的对象:

1. 通过new操作符,Javascript引擎会将this指针返回给被赋值的变量A(对应上面的例子就是marry和kevin变量),这个时候A和 this指针引用的就是同一个对象了,即A == this。过程参见上面的伪代码。

2. 通过Function.apply或者Function.call的原型方法,我们可以将this指针指代的对象以参数的形式传入,这个时候,函数内部使用的this指针就是传入的参数。

目录
相关文章
|
10天前
|
JavaScript 前端开发 数据安全/隐私保护
|
11天前
|
自然语言处理 JavaScript 前端开发
js_关键字this指向哪里?
js_关键字this指向哪里?
4 0
|
13天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
8 1
|
20天前
|
存储 编译器 C++
【C++成长记】C++入门 | 类和对象(上) |类的作用域、类的实例化、类的对象大小的计算、类成员函数的this指针
【C++成长记】C++入门 | 类和对象(上) |类的作用域、类的实例化、类的对象大小的计算、类成员函数的this指针
|
27天前
|
存储 编译器 程序员
【C++】类和对象①(什么是面向对象 | 类的定义 | 类的访问限定符及封装 | 类的作用域和实例化 | 类对象的存储方式 | this指针)
【C++】类和对象①(什么是面向对象 | 类的定义 | 类的访问限定符及封装 | 类的作用域和实例化 | 类对象的存储方式 | this指针)
|
1月前
|
自然语言处理 JavaScript 前端开发
解析JavaScript中的this:新手常见误区与应对策略
【4月更文挑战第1天】本文介绍了JavaScript中`this`的关键作用及其常见误区,包括作用域与调用上下文混淆、回调函数中的`this`绑定、构造函数使用、对象字面量方法与普通函数的区别以及严格模式的影响。通过理解四条绑定规则(显式、new、隐式、默认)和采取相应避免策略,开发者能更好地掌握和运用`this`,提高编程效率和代码质量。
19 1
|
1月前
|
JavaScript 前端开发 开发者
解密JavaScript中this的指向问题
解密JavaScript中this的指向问题
158 2
|
分布式计算 JavaScript 前端开发
JS中函数的this指向(二)
JS中函数的this指向
42 0
|
Dart JavaScript 前端开发
JS中函数的this指向(一)
JS中函数的this指向
33 0
|
2月前
|
存储 编译器 C语言
【c++】类和对象(二)this指针
朋友们大家好,本节内容来到类和对象第二篇,本篇文章会带领大家了解this指针
【c++】类和对象(二)this指针