美文网首页
js构造函数this指向

js构造函数this指向

作者: 王小正 | 来源:发表于2017-09-02 10:04 被阅读0次

JS里没有类.

构造函数是个函数,this指向的是个对象,this蒙上眼睛指也指不到构造函数去.

构造函数的this指向创建的实例对象无疑.要明白这一点,要先弄明白,用new操作符调用构造函数的时候都发生了什么.

正好我有个答案是讲构造函数的,我这里原样搬来:

造函数其实和普通函数本质上并无区别,唯一的区别有两个:

1.函数首字母大写,这个区别只是约定俗成的,便于区分。你实在要小写定义构造函数也完全没问题,所以这个区别可以忽略。

2.构造函数的调用需要用new操作符,而普通函数的调用又分很多种,但是都不会用到new操作符。所以,构造函数和普通函数的区别就在这个new操作符里,现在让我们来好好研究一下这个new操作符。

new操作符创建对象时发生的事情:

第一步:创建一个Object对象实例。

第二步:将构造函数的执行对象赋给新生成的这个实例。

第三步:执行构造函数中的代码

第四步:返回新生成的对象实例

注意:原本的构造函数是window对象的方法,如果不用new操作符而直接调用,那么构造函数的执行对象就是window,即this指向了window。现在用new操作符后,this就指向了新生成的对象。理解这一步至关重要。

执行构造函数中的代码,看代码:

functionPerson(){

this.name="Tiny Colder";

varage =22;

window.age =22;

}

varp =newPerson();

alert(p.name)//Tiny Colder;

alert(p.age)//undefined;

alert(window.age)//22;

当用new操作符创建对象时,先创建了一个对象实例,然后执行代码。所以还在纠结,什么时候构造函数定义的属性会继承给实例对象的,都可以这么来看:

varp=newObject();

p.name="Tiny Colder";

这是普通的创建对象,然后给对象添加属性的方法。如果每创建一个对象,都需要这么几行代码,无疑是糟糕的。这个需求就正好跟这一点对应:new操作符,自动执行构造函数里的代码。如此我们便可以省掉添加属性时重复冗余的代码。那么这些属性时如何添加到新生成的对象里的呢?

第二个步骤里已经说了:将构造函数的执行对象赋给新生成的这个实例。再结合上一段里说的,自动执行构造函数里的

this.name = "Tiny Colder";时,就相当于是执行p.name = "Tiny Colder";而构造函数里的var age = 22;语句,会执行但是对新生成的对象并无影响。window.age = 22;语句,会执行,且会给window对象添加一个属性。alert为证。

或许到这里,你已经理解了new操作符的前三步了,重要的三步。但是这个函数是如何返回对象的呢?我们并没有看到有任何跟return相关的语句。这就是new操作符的最后一步:返回新生成的对象。如果被调用的函数没有显式的return表达式(仅限于返回对象),则隐式的会返回this对象-也就是新创建的对象。

现在来看一下这个代码:

functionPerson(){

this.name="Tiny Colder";

return{};

}

varp =newPerson();

alert(p.name)//undefined;

一个对象就这么被创建出来了。实际上,

varp =newPerson();

varp =newObject();

Person.apply(p);

是一样的效果

相关文章

  • js构造函数this指向

    JS里没有类. 构造函数是个函数,this指向的是个对象,this蒙上眼睛指也指不到构造函数去. 构造函数的thi...

  • prototype小结

    ### prototype 小结 - 构造函数有prototype属性指向其对应的原型对象: ```js // a...

  • 无标题文章

    js 原型继承方面的理解 1.constructor 构造器 1.1 函数的构造器全部指向的是 Function ...

  • JS原型

    JS原型 构造函数和对象 函数的prototype 函数具有prototype属性,它的指向是什么呢?答案是: 它...

  • this深入理解

    js中this指向有几种情况 全局环境 函数调用 构造调用 apply、call、bind绑定 箭头函数 全局环境...

  • 2018-07-11

    JS原型和原型链 1.每个构造函数生成实例的时候 会自带一个constructor属性 指向该构造函数 实例.co...

  • 原型实例化对象的constructor的指向问题

    构造器函数在js中式相当于类的概念,但是我们在通过构造器函数实例化对象的时候可能会出现constructor的指向...

  • 理解prototype和__proto__以及construct

    在此例子中,对象实例a的__proto__指向其构造函数A的原型链prototype对象;js函数本身也是对象,构...

  • this指向总结

    总结: 纯粹的函数调用:指向全局 作为对象方法的调用:指向对象(调用者) 构造函数调用:构造函数中的this指向n...

  • JS中的this

    下面就是this的指向 ①,new 构造函数 的组合,构造函数内 this 指向它的实例 ②,监听函数里面的thi...

网友评论

      本文标题:js构造函数this指向

      本文链接:https://www.haomeiwen.com/subject/paahdxtx.html