彻底理解原型、原型链、new操作符、prototype、proto、constructor等属性的概念

电玩女神 2022-07-13 00:10 160阅读 0赞

看过网上很多类似的文章， 我还要写这篇文章的目的一是加深自己的印象，二是让读者用更加易懂的方式去理解这几个概念。（如果还是不理解，那是我的错。。毕竟我也只是在一个较浅的层面去理解的）

*   *  原型和原型链
     *  函数的prototype属性和对象的\_\_proto\_\_属性
     *  构造函数
     *  new操作符
     *  constructor属性

首先给出几个理论概念：

## 原型和原型链 ##

在JS中，万物皆对象。但是对象不是凭空产生的，而且对象有自己与生俱来的属性和方法，而这些属性和方法都是从它们的原型中**继承**而来的（继承的概念在另一篇文章会详细介绍），可以理解为儿子继承父亲的财产？ 每个对象的`__proto__`属性 就是一个指向它们的原型的一个指针，它们的原型也是对象，也有`__proto__`属性指向它的原型，这样就构成了**原型链**，最终的原型对象就是object对象，也就是说 任何对象它们的原型链的最顶端都是object对象。 这个object对象的`__proto__` 属性值为null；

## 函数的prototype属性和对象的\_\_proto\_\_属性 ##

*  函数的prototype属性
    
    只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。  
    引用自《JavaScript高级程序设计》
 *  对象的`__proto__`属性
    
    即一个对象的原型对象

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

接下来看个例子，并解释构造函数与new操作符以及`__proto__`属性和prototype属性的区别：

var Fn = function(){ 
        //函数体
    };
    var p = new Fn();

定义了一个构造函数 Fn，它当然也是一个函数，是Function类型的实例  
变量p是通过 new操作符 + Fn()构造函数 创建的一个实例对象。

## 构造函数 ##

*  构造函数默认首字母大写，ECMAscript中内置的构造函数有 Array(),String(),Function(),Object()….
 *  也可以自己创建构造函数，如上面例子
 *  若直接调用构造函数时，与普通函数没有区别
 *  若加上new操作符调用时，情况就略为复杂了，请往下看

## new操作符 ##

new会自动创建this对象，且类型就是构造函数对应的类型。（Array()的话就是array类型的对象，上述例子是object类型）

1.    
    
2.  创建一个空对象 p = \{\} ，它是object的实例
3.  设置p的原型链 p.`__proto__`=Fn.prototype; //Fn.prototype为构造函数的原型对象
4.  Fn的this就指向了p，执行Fn的函数体
5.  判断Fn的返回值类型：

如果是值类型，就丢弃它，还是返回p对象

var Fn = function(){ 
        this.name = 'xiaoming';
        return this.name;
    };
    var p = new Fn();
    console.log(p);//控制台返回 Fn {name: "xiaoming"} 这里的Fn意思是通过Fn构造函数创建的实例 ，可以看到返回的是创建的p对象

如果是引用类型，就返回这个引用类型的对象，替换掉p

var Fn = function(){
        this.name = 'xiaoming';
        return this.__proto__;
    };
    var p = new Fn();
    console.log(p);//控制台返回  Object {} 。首先this成了p对象，但是Fn构造函数返回的不是this，而是返回this也就是p对象的__proto__属性，这个属性指向了他的原型对象也就是Object()构造函数创建的object对象，它是一个引用类型，它替换掉了p！ 因此这里的变量 p 是一个指针，指向它的原型
    
    console.log(Fn.prototype == p) //返回true，因为Fn构造函数的原型和p指针此时指向p.__proto__，是同一个对象

这个例子很好地解释了new操作符、构造函数、prototype属性、**proto**属性。 我自己是这么认为的^^

## constructor属性 ##

constructor属性返回对创建此对象的数组函数的引用。