JS原型与原型链

ゝ一世哀愁。 2022-09-04 02:55 219阅读 0赞

### 文章目录 ###

*  JS原型
 *   *  1.prototype 原型对象
     *  2.constructor 构造函数
     *  3.\_proto\_
     *  4.原型链
     *  面试：var p1 = new Person() 发生了什么

# JS原型 #

1.  所有的引用类型（函数、对象、数组），都有一个`_proto_` (隐性原型)属性，`_proto_`指向它的`构造函数的 prototype`。
2.  所有的引用类型（函数、对象、数组），都有一个`constructor` (构造函数)属性，`constructor`指向它的`构造函数`。
3.  大部分函数(不包括`箭头函数`与`bind创建的函数`)都有一个`prototype`属性，作用就是让该函数所实例化的对象们都可以找到公用的属性和方法

## 1.prototype 原型对象 ##

1.  每个函数对象(不包括`箭头函数`与`bind创建的函数`)都有一个`prototype` 属性，这个属性指向函数的原型对象。
2.  每当定义一个对象（函数也是对象）时候，对象中都会包含`_proto_` (隐性原型)。
3.  `prototype`包含特定类型的所有实例共享的属性和方法，即这个原型对象是用来给实例共享属性和方法的。
4.  原型对象（Person.prototype）是 构造函数（Person）的一个实例。

function Person() { }
    Person.prototype.name = 'Zaxlct';
    Person.prototype.age  = 28;
    Person.prototype.job  = 'Software Engineer';
    Person.prototype.sayName = function() { 
      alert(this.name);
    }
    
    var person1 = new Person();
    person1.sayName(); // 'Zaxlct'
    
    var person2 = new Person();
    person2.sayName(); // 'Zaxlct'
    
    console.log(person1.sayName == person2.sayName); //true

## 2.constructor 构造函数 ##

1.  所有的引用类型（函数、对象、数组），都有一个`constructor` (构造函数)属性，`constructor`指向它的`构造函数`。
2.  原型对象中的`constructor` 属性，指向该原型对象的构造函数

function Person(name, age, job) { 
     this.name = name;
     this.age = age;
     this.job = job;
     this.sayName = function() {  alert(this.name) } 
    }
    var person1 = new Person('Zaxlct', 28, 'Software Engineer');
    var person2 = new Person('Mick', 23, 'Doctor');

上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都有一个 constructor （构造函数）属性，该属性（是一个指针）指向 Person。

## 3.*proto* ##

1.  所有的引用类型（函数、对象、数组），都有一个`_proto_` (隐性原型)属性，`_proto_`指向它的`构造函数的 prototype`。

## 4.原型链 ##

当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的`_proto_` （即他的`构造函数的prototype`）中寻找。如果没有，则会接着往上找，一直上溯到`Object.prototype`，也就是说所有对象都继承`Object.prototype`的属性，`Object.prototype`的原型是`null`，`null`没有任何属性和方法。

## 面试：var p1 = new Person() 发生了什么 ##

1.var p1 = new Object(); // 此时p1._proto_ = Object.Prototype
    2.p1._proto_ = Person.prototype;
    3.Person.call(p1); // 使用新对象p1调用函数Person，将this作用域给p1