Javascript教程（八）——原型对象与原型链

一、原型（prototype）

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。
这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用prototype没有任何作用
如果当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__ 来访问该属性

function MyClass(){
    
    

}
var mc = new MyClass();
var mc2 = new MyClass();

console.log(MyClass.prototype);
console.log(mc.__proto__); 
console.log(mc2.__proto__);  

console.log(mc.__proto__ == MyClass.prototype);   // true
console.log(mc2.__proto__ == MyClass.prototype);   // true

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

//向MyClass的原型中添加属性a
MyClass.prototype.a = "我是MyClass中的a";
			
//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
      
      
	alert("hello");
};
// 并没有向mc这个对象实例中添加a，但是mc.a输出是MyClass原型中的属性a
console.log("第一次输出:",mc.a);   //控制台输出123
	
// 如果再向mc中添加属性a
mc.a = "我是mc中的a";
// 此时再输出mc.a就变了
console.log("第二次输出:",mc.a);   //控制台输出"我是mc中的a"
	
mc.sayHello();  //弹框跳出hello，mc会去原型中找sayHello函数

所以！

当我们访问对象的一个属性或方法时
- 它会先在对象自身中寻找，如果有则直接使用，
- 如果没有则会去原型对象中寻找，如果找到则直接使用

继续改进上节的构造函数：向原型中添加sayName方法

function Person(name , age , gender){
    
    
	this.name = name;
	this.age = age;
	this.gender = gender;
}
//向Person原型中添加sayName方法
Person.prototype.sayName = function(){
    
    
	alert("Hello大家好，我是:"+this.name);
};

//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName();   //弹框输出Hello大家好，我是孙悟空
per2.sayName();  //弹框输出Hello大家好，我是猪八戒

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中。
这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

二、操作符in与对象的hasOwnProperty()方法

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

/*
 * 创建一个构造函数
 */
function MyClass(){
    
    
	
}
			
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";

var mc = new MyClass();
console.log(mc.name);   //此时mc对象中没有name，是MyClass原型中的name
			
//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
console.log("name" in mc);    //true

那如果想检查对象自身是否含有该属性呢？

使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
使用该方法只有当对象自身中含有属性时，才会返回true

console.log(mc.hasOwnProperty("name"));   //false

//向mc中添加属性age
mc.age = 18;
console.log(mc.hasOwnProperty("age"));   //true

那mc对象的这个hasOwnProperty()方法从何而来呢，我们并没有为mc对象添加过这个方法。

console.log(mc.hasOwnProperty("hasOwnProperty"));  //false

那这个方法应该是不是在MyClass的原型里呢。打印一下试试看。

console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));  //false

发现原型里也没有这个方法。。。

思考：

原型对象也是对象，而对象都有原型，所以原型对象也有原型
这就是原型链

三、原型链

当我们使用一个对象的属性或方法时，会现在自身中寻找，
自身中如果有，则直接使用，
如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找，直到找到Object对象的原型
- Object的原型没有原型，如果在Object原型中依然没有找到，则返回undefined

刚刚的图可以继续完善。

console.log(mc.__proto__);   //打印mc对象的原型对象
console.log(mc.__proto__.__proto__); //打印mc对象的原型对象的原型对象
console.log(Object.prototype);   //Object的原型对象
console.log(mc.__proto__.__proto__ == Object.prototype);  //true,发现 mc的原型的原型 就是 Object对象的原型 了，那么就找到头儿了，不能继续找了
// console.log(mc.__proto__.__proto__.__proto__);  //是null，即mc.__proto__.__proto__没有原型，值为空
console.log(Object.prototype.prototype);  //undefined,因为Object的原型没有原型

在这里插入图片描述

四、垃圾回收（GC）

就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾，这些垃圾积攒过多以后，会导致程序运行的速度过慢。
所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾。
当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。