原型与原型链的理解

原型与原型链

• 1、什么是原型
• 2、什么是原型链
• 3、原型与原型链之间有什么关系
• 4、原型链中存在的问题
• 5、原型链作用

在理解原型与原型链之前，我们需要明白 JS 中new关键字他干了什么。他与原型与原型链之间有什么关系。

New关键字 
1、创建了一个新对象
2、他将构造函数的this指向了这个新对象
3、新对象的__proto__指向了构造函数的prototype属性
4、执行构造函数
5、返回this

注：__proto__ 可以理解为每一个人都有的属性

1、了解了new关键字干的事情，我们现在来了解一下原型

1、所有应用数据类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
2、所有的函数都有一个prototype(原型)属性，属性值是一个普通的对象
3、所有引用数据类型的__proto__属性执行他的构造函数prototype

2、了解到原型之后再来了解一下原型链

需要访问某一个对象的某一个属性时，会现在自身的属性上查找，当若没有找到的话就会去他的隐式原型链（__proto__）上查找，一层一层往上查找，若没有则返回null,这样就形成了原型的一条链。也就是原型链

3、了解了原型和原型链，现在来看看他们之间有什么关系

上代码更直观

function Person(name, age) {
        this.name = name;
        this.age = age;
}
var person1 = new Person('洋洋', 18);

console.log(person1.__proto__ === Person.prototype);           // true
console.log(person1.__proto__.__proto__ === Object.prototype); // true
console.log(person1.__proto__.__proto__.__proto__ === null);   // true

在这里我们可以看到一条原型链：
person1 ---- Person ---Object---null;

画图来理解一下他们之间的关系

表面理解可以根据上面这条链，深层理解看下面的这张图，是我美女老师上课方便我们理解的时候画的，我自己画的丑，就不想放了。

解释一下这张图

 console.log(person.__proto__ === Function.prototype) //true
 console.log( Function.__proto__ ===Object.prototype) //true
 console.log( Function.__proto__ ===Function.prototype) //true
 console.log(Object.prototype===null)				 //true

1、新对象都是构造函数构造出来的，他指向构造函数的原型对象，
构造函数的原型对象有constructer属性指向构造函数

2、函数都是Function函数对象构造出来的

3、每个对象都有__proto__属性
4、构造函数都有prototype属性
6、Object函数构造了所有
7、Function函数顶层没有人构造，自己构造了自己（好牛奥）
8、Object对象的构造是Function函数
console.log(Object.__proto__ ===Function.prototype) //true
console.log(Object.__proto__.__proto__ ===Object.prototype) //true
console.log(Object.__proto__.__proto__.__proto__ ===null) //true

 4、原型链中问题
1、包含引用数据类型的原型会被所有的实例共享
	引用数据类型：Array Function Object Date  RegExp
2、创建子类的时候不能传递参数

5、原型链的作用主要是继承

看个继承的列子：
function animal(){};      //动物函数
animal.prototype.run= function(){    //动物构造函数的原型链上创建了一个run函数
         console.log('我当然会跑啊');
    };
console.log(animal);         //ƒanimal(){  }
dog.prototype = new animal();	//子类继承父类  狗继承动物
function dog(name,age){         狗的函数
    this.name=name;
    this.age=age;
  }
var dog=new dog('dada',3); //将函数转换为对象
console.log(dog); //dog {name: 'dada', age: 3}
dog.run();//我当然会跑啊  --继承成功
g=new dog('dada',3); //将函数转换为对象
console.log(dog); //dog {name: 'dada', age: 3}
dog.run();//我当然会跑啊  --继承`在这里插入代码片`成功