1.为什么需要原型对象?

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。

因为多个构造函数会开辟多个内存空间,这样会导致内存浪费的问题,那么如何解决这个问题呢?

方案一:使用全局函数解决,但是会导致变量污染

方案二:使用全局对象解决,解决了变量污染，但是这个对象本身也会造成污染

所以原型对象来啦!

原型对象的作用 ： 解决内存浪费 + 变量污染(共享方法)

2.什么是原型对象呢?

任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称为原型对象

这个对象也会自动获得 constructor 属性

而实例都包含一个指向原型对象的内部指针__proto__

三者之间的关系如图

每当我们创造了一个构造函数,系统就会贴心的分配了一个老婆-----原型对象

从此,构造函数和原型对象过上了没羞没臊的甜蜜生活,并且有个孩子 ------实例对象

构造函数用.prototype就能找到属于自己原型对象(老婆)

原型对象用constructor就能找到属于自己的构造函数(老公)

实例对象用.proto(亲子鉴定)能找到自己的原型对象(妈妈)

","marks":[]}]}]}],"state":{}}]'>

<script>   
function Pig(name, age) {  
this.name = name;  
this.age = age;     
} 
//1.用构造函数自身访问  
console.log(Pig.prototype)   
//2.用实例对象可直接访问原型中的任意成员     
let p1 = new Pig('小猪乔治', 5)    
console.log(p1)    
//检测构造函数/原型对象/实例对象三者之间的关系(滴血认亲)
console.log(p1.__proto__.constructor === Pig)  //打印的是true  (亲父子)  
console.log(p1.__proto__ === Pig.prototype)    //打印的是true  (亲母子) 
</script>

3.原型链

每一个实例对象都有自己的原型，而原型也是对象，也有自己的原型。以此类推，形成链式结构,称之为原型链。 人有人的妈,妖有妖的妈,原型对象也是一个对象,也能通过__proto__找到自己的原型对象,以此类推，直到原型链终点null. 如果还找不到: 属性则获取undefined，方法则报错undefined is not a function

3.1原型链的终点

万物皆对象,万物皆空

4.内置对象的原型链

//查看内置对象原型链  
let arr = [10,20,30]    
console.log(arr)      
//(1)查看arr的原型         
console.log( arr.__proto__.constructor )//Array    
console.log( arr.__proto__ === Array.prototype )//true   
//(2)查看arr的原型的原型     
console.log( arr.__proto__.__proto__.constructor )//Object   
console.log( arr.__proto__.__proto__ === Object.prototype  )//true     
//字符串原型链     
let str = new String('abc')      
console.log( str )         //查看str的原型      
console.log( str.__proto__.constructor ) //String    
console.log( str.__proto__ === String.prototype )//true        
//查看str的原型的原型      
console.log( str.__proto__.__proto__.constructor )//Object    
console.log( str.__proto__.__proto__ === Object.prototype )//true

4.2-Date的原型链

//2.Date
let date1 = new Date(); 
//细节：日期对象直接console.log会转成string，查看对象需要使用console.dir打印 console.dir(date1);
console.log ( date1.__proto__ === Date.prototype );//true 
console.log ( date1.__proto__.__proto__.constructor );//Object 
console.log ( date1.__proto__.__proto__ === Object.prototype );//true

4.3-String对象原型链

字符串是一个伪数组

//3.String
let str = new String('123');
console.log ( str ); 
console.log ( str.__proto__ === String.prototype );//true 
console.log ( str.__proto__.__proto__.constructor );//Object 
console.log ( str.__proto__.__proto__ === Object.prototype );//true

4.4-DOM对象原型链

//4.界面元素 
let div1 = document.getElementById('div1'); 
let p1 = document.getElementById('p1');

未完待续...