学习JS第六节——原型链

1. 原型

定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象。

//Person.prototype			-->原型，即function对象的属性
//Person.prototype = {}		-->这是祖先，也是function对象

//用原型给构造函数添加属性
Person.prototype.LastName = "Deng";
Person.prototype.say = function() {
	console.log("hehe");
}

//定义构造函数
function Person() {
}

//对象实例，继承原型的属性和方法
var person = new Person();
var person1 = new Person();

2.原型的应用

• 利用原型特点和概念，可以提取公有属性

//用构造函数作为车间生产对象
function Person(name) {
	this.name = name;
	this.age = 20;
	this.run = function() {};
}

//创建对象时，每次都要执行所有的对象属性
//造成代码冗余和耦合
var person1 = new person('kathy');
var person2 = new person('cheng');

用原型将代码改为：

//先将所有对象都要有的属性方法用原型定义
Person.prototype.age = 20;
Person.prototype.run = function() {};
//再用构造函数构造每个对象特有的属性
function Person(name) {
	this.name = name;
}
var person1 = new person('kathy');

用delete删除对象并不存在的属性时，不会报错，仍会返回true

利用原型是对象可以将代码更加简化为

Person.prototype = {
	age : 20,
	run : function() {
		console.log("hurry!");
	}
}
function Person(name) {
	this.name = name;
}
var person1 = new person('kathy');

3.构造器constructor

对象的原型prototype隐含了一个构造器属性

function Person() {
}
var person = new Person();

//控制台输入 person.constructor
//返回 function Person() {}

constructor是对象原型prototype的隐含属性，保存了对象的构造函数

//控制台输入 Person.prototype
//返回 Object {
	constructor:Person(),
	_proto_:Object
}

若修改constructor属性，则对象的构造函数也会改变

function Car() {}

function Person() {
}
Person.prototype = {
	consturctor : Car
}
var person = new Person();

//控制台输入 person.constructor 
//返回 function Car() {}

4.对象的隐式属性__proto__

工程中的命名规则：
对于不想让别人使用的属性，可以命名为_private

系统自带的属性一般会在前加两个下划线，比如__proto__

系统中隐式给对象添加__proto__属性,将对象的原型放入这个属性中

Person.prototype.name = 'abc'; 

function Person() {
	// var this = {
	//		__proto__ : Person.prototype
	//};
}
var person1 = new person();

• 可以改变__proto__的指向

Person.prototype.name = 'abc'; 

function Person() {
}

var obj = {
	name : 'sunny'
}

var person = new person();
//改变原型
person.__proto__ = obj;

//控制台输入 console.log(person.name)
//返回 sunny

• 对象的引用赋值

Person.prototype.name = 'abc'; 

function Person() {
	// var this = {
	//		__proto__ : Person.prototype
	//};
}
var person = new person();
Person.prototype = {
	name : 'sunny';
}

//控制台输入 console.log(person.name)
//输出 abc

上述代码的逻辑相当于引用对象的赋值

var obj = {
	name : 'a'
};
var obj1 = obj;
obj = {
	name : 'b'
};

由于在new的阶段给person对象添加了隐式属性__proto__,就发生了下列过程

Person.prototype ＝ {name ： 'abc'};
 __proto__ = Person.prototype;
Person.prototype = {name : 'kathy'};

转换上述代码的顺序

Person.prototype.name = 'abc'; 

//注意：此处有变量提升哦
function Person() {
	// var this = {
	//		__proto__ : Person.prototype
	//};
}

Person.prototype = {
	name : 'sunny';
}

var person = new person();

//控制台输入 console.log(person.name)
//输出 sunny

因为先改变了原型的值才new，所以改变了name的名字。