js中的this原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的this原理相关的知识,希望对你有一定的参考价值。

参考技术A

this 指的是 函数运行时 所在的环境。(不是定义时所在的环境)

怎么理解这句话呢?看如下例子:

在这个例子中,首先第一个输出,因为wFunction是运行在全局环境中,所以 this 指向全局环境,所以输出1;第二个输出,因为wFunction运行在wObj环境中,所以 this 指向wObj,而wObj的w属性值为2,所以输出2;

那么问题来了,为什么第二个说是在wObj环境中运行呢,运行环境是怎么来判别的呢?这得从内存的数据结构说起。

首先,是考虑到内存的数据结构,才设计这个this的。那内存的数据结构是怎样的呢,先看个例子:

这里,javascript引擎会在内存里先生成一个对象w:5,然后把这个对象的内存地址(reference)赋值给wObj变量。

如果通过wObj.w来读取这个对象的属性w,则引擎会先从wObj这个变量拿到对象的内存地址,然后从该地址读出这个对象,返回w属性。

在看下面一个例子:

这里,javaScript引擎会先将函数function()... 单独保存在内存中 。然后javaScript引擎会在内存里生成一个对象wFunc:wFunction,而wFunction则是函数的内存地址(reference)。然后把这个对象的内存地址赋值给wObj变量。

如果通过wObj.wFunc()执行函数,则引擎会先从wObj这个变量拿到对象的内存地址,然后从该地址读出这个对象,返回wFunc属性,而wFunc属性的值是函数function()...的内存地址(reference),因为这个 是单独的一个值,所以可以在不同环境(上下文)执行 。在这里函数是通过wObj找到的(wObj的属性wFunc),所以在wObj环境中执行的。

这里解释了为啥函数是可以在不同的环境中执行。那么问题来了,这动态的执行环境,怎么获取呢?

针对获取执行环境问题, this 就这么设计出来了,它的设计目的就是在函数体内部,指代函数 当前的运行环境

回到文章开头例子,并加以深化如下:

第一个输出,函数执行时,是通过全局变量wFunction找到函数引用地址的,它的执行环境则是全局,因此输出全局w,为1;

第二个输出,函数执行时,是通过wObj指向的对象里的wFunction属性找到的函数引用地址的,因此,它的执行环境则是wObj指向的对象,因此输出对象的w,为2;

第三个输出,函数执行时,是通过全局变量wObjFunc找到函数引用地址的,(因为let wObjFunc = wObj.wFunction;这直接把函数的引用地址直接赋给了全局变量wObjFunc,所以wObjFunc直接指向函数本身)它的执行环境则是全局,因此输出全局w,为1;

JS中的new操作符原理解析

1 var Person = function(name){
2    this.name  = name;
3 }
4 Person.prototype.sayHello = function() {
5     console.log(\'hello \' + this.name);
6 }
7 var p1 = new Person(\'HANMEI\');
8 p1.sayHello();

1. 创建一个类的实例:创建一个空对象obj,然后把这个空对象的__proto__设置为Person.prototype(即构造函数的prototype);

2. 初始化实例:构造函数Person被传入参数并调用,关键字this被设定指向该实例obj;

3. 返回实例obj。

 

new 实现

1 function New(F){
2     var obj = {\'__proto__\': F.prototype};  /*第一步*/
3     return function() {
4         F.apply(obj, arguments);           /*第二步*/
5         return obj;                        /*第三步*/
6     }
7 }

 

-------------------------------

原文:https://www.cnblogs.com/lvmylife/p/8184176.html

以上是关于js中的this原理的主要内容,如果未能解决你的问题,请参考以下文章

js中的this

JS中的new操作符原理解析

js this工作原理

JS中的thiscallapply和bind

详解JavaScript中的this

详解JavaScript中的this