new操作符；构造函数的继承；构造函数的this指向；函数执行时的this指向

港控/mmm° 2023-02-20 02:48 25阅读 0赞

### **1、new操作符的优先级** ###

**new操作符的优先级仅次于括号()，**比如：

new Date().getTime()

运算符优先级可参考：[https://blog.csdn.net/zyz00000000/article/details/108345985][https_blog.csdn.net_zyz00000000_article_details_108345985]

### **`2、new` 关键字会进行如下的操作：** ###

1.  创建一个空对象（即`{}`）；
2.  该对象的\_\_proto\_\_属性指向构造函数的原型（prototype）；
3.  将该对象作为`this`的上下文 ；即执行构造函数，他的this是该对象。
4.  如果构造函数没有返回对象，则返回`this`。

new操作符会用到原型，将\[\[Prototype\]\]属性会指向构造函数的原型。修改\[\[Prototype\]\]的指向和修改\[\[Prototype\]\]指向的原型是不同的。

**注意：new操作的this指向实例对象**

**参考文章：**[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_new]

### 3、new操作符之前或之后修改原型 ###

**（1）new操作符之前的修改原型**

申明一个函数的时候 ，该函数的prototype属性指向原型，且原型中默认是constructor属性，指向该函数。

**构造函数和原型是唯一的，所以两者之间可以互相引用，而实例对象可以有多个，没有标准的引用，有非标准的\_\_proto\_\_属性指向原型。**

注意修改函数的prototype，是修改引用指向，还是修改了对象本身。

修改引用指向，就是修改了原型，指向一个新的对象：

function Foo(){
                this.name = "foo";
                this.age = 24
            }
            console.log(Foo.prototype);
            有默认的原型，原型内的属性：
            constructor: ƒ Foo()
            __proto__: Object
            
            修改了原型
            Foo.prototype = {
                a: 1,
                b: 2
            }

给默认原型添加属性和方法 ：

function Foo(){
                this.name = "foo";
                this.age = 24
            }
            
            Foo.prototype.a = 1;
            Foo.prototype.b = 2;
            console.log(Foo.prototype);//默认原型上添加属性和方法
    
            默认原型上添加了a和b属性
            a: 1
            b: 2
            constructor: ƒ Foo()
            __proto__: Object

**（2）new操作符之后修改原型**

修改实例的\_\_proto\_\_指向：不影响其他的实例的原型

function Foo(){
                this.name = "foo";
                this.age = 24
            }
            Foo.prototype.a = 1;
            Foo.prototype.b = 2;
    
            var obj1 = new Foo();
            obj1.__proto__ = {
                name: "新的对象"
            }
            console.log(obj1.__proto__);

修改\_\_proto\_\_指向的原型：其实也可以像a和b赋值那样添加属性

function Foo(){
                this.name = "foo";
                this.age = 24
            }
            Foo.prototype.a = 1;
            Foo.prototype.b = 2;
    
            var obj1 = new Foo();
            obj1.__proto__.name = "原型上添加name属性";
            console.log(obj1.__proto__);

### 4、函数的this指向 ###

**（1）非严格模式下**

new操作符，构造函数的this是实例对象；函数执行，this默认指向window。

function Foo(name, age){
               console.log(this); 
               this.name = name;
               this.age = age;
           }
           function Bar(name, age, hobby) {
               Foo(name, age); //函数调用时，this指向指向window。
               this.hobby = hobby; 
           }
           new Foo('zhu', 24) //Foo函数的this指向实例对象Foo
           var bar = new Bar('li', 23, 'play game'); //Bar函数的this指向实例对象Bar
           console.log(bar);

![20201208135520661.png][]

**（2）严格模式下**

new操作符，构造函数的this是实例对象；函数执行，this默认为undefined。

'use strict';
           function Foo(name, age){
               console.log(this); 
               this.name = name;
               this.age = age;
           }
           function Bar(name, age, hobby) {
               Foo(name, age); //函数执行时，this指向默认undefined。undefined.name  undefined.age会报错
               this.hobby = hobby; 
           }
           new Foo('zhu', 24) //Foo函数的this指向实例对象Foo
           var bar = new Bar('li', 23, 'play game'); //Bar函数的this指向实例对象Bar
           console.log(bar);

![2020120813575357.png][]

### 5、构造函数如何像super那样调用别的构造函数去创建实例对象呢？ ###

把new构造的实例对象，传给另一个构造函数——改变另一个构造函数的this指向。

Foo函数的this为Bar实例对象。非严格模式下，不改变this的话，Foo执行时this指向window；严格模式下，不改变this的话，Foo执行时，this是undefined。

function Foo(name, age){
               console.log(this); 
               this.name = name;
               this.age = age;
           }
           function Bar(name, age, hobby) {
               Foo.call(this,name, age); //Foo函数的this为Bar实例对象
               this.hobby = hobby; 
           }
           var bar = new Bar('li', 23, 'play game');
           console.log(bar);

![20201208140327915.png][]

[https_blog.csdn.net_zyz00000000_article_details_108345985]: https://blog.csdn.net/zyz00000000/article/details/108345985
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_new]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new
[20201208135520661.png]: https://img-blog.csdnimg.cn/20201208135520661.png
[2020120813575357.png]: https://img-blog.csdnimg.cn/2020120813575357.png
[20201208140327915.png]: https://img-blog.csdnimg.cn/20201208140327915.png