JavaScript 面向对象（五）原型链

 

5. 原型链

prototype 原型
'每一个构造函数都有一个属性叫做prototype，指向一个对象，'
当这个构造函数被new 的时候，它的每一个实例 (即将生成的对象)的__proto__属性，也指向这个对象

function User() {
	console.log(this);
	this.name = 'whh';  //即将生成的对象
	this.age = 18;
}

var whh =new User();
console.log(whh); //whh这个对象

User {}
	age: 18
	name: "whh"
	__proto__:	Object
		constructor: ƒ User()
			arguments: null
			caller: null
			length: 0
			name: "User"
			prototype: {constructor: ƒ},
				constructor: ƒ User()
				__proto__: Object
			__proto__: ƒ ()
				apply: ƒ apply()
				arguments: (...)
				bind: ƒ bind()
				call: ƒ call()
				caller: (...)
				constructor: ƒ Function()
				length: 0
				name: ""
				toString: ƒ toString()
				Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
				get arguments: ƒ ()
				set arguments: ƒ ()
				get caller: ƒ ()
				set caller: ƒ ()
				__proto__: Object
				[[FunctionLocation]]: VM1753:1
			[[Scopes]]: Scopes[1]
		__proto__:	Object
			constructor: ƒ Object()
			hasOwnProperty: ƒ hasOwnProperty()
			isPrototypeOf: ƒ isPrototypeOf()
			propertyIsEnumerable: ƒ propertyIsEnumerable()
			toLocaleString: ƒ toLocaleString()
			toString: ƒ toString()
			valueOf: ƒ valueOf()
			__defineGetter__: ƒ __defineGetter__()
			__defineSetter__: ƒ __defineSetter__()
			__lookupGetter__: ƒ __lookupGetter__()
			__lookupSetter__: ƒ __lookupSetter__()
			get __proto__: ƒ __proto__()
			set __proto__: ƒ __proto__()

每个'函数天生都有prototype属性，指向一个空对象, prototype属性的值是一个对象'，也就是说，
我们不需要定义这个prototype属性，任何一个函数只要写出来，它就拥有了prototype属性，
这个属性对它自己而言没有任何意义！它的唯一意义是儿子们 (即将生成的对象)的指明灯！
'构造函数的 prototype属性 指向谁，它new出来的儿子的__proto__属性就指向谁''

function People(name,age,sex) {
	this.name =name;
	this.age =age;
	this.sex =sex;
}
var ming =new People('ming',12,'nan');

console.log(People.prototype===ming.__proto__);	//true

console.log(whh.__proto__); //whh这个对象
console.log(User.prototype);//或者也是一样的

'称 People.prototype是People构造函数的 “原型”，People.prototype是ming的 “原型对象”'

5.1

__proto__是神器，有原型链查找功能，当'ming身上没有某个属性'的时候，
'系统会沿着ming的属性__proto__去寻找它的原型对象身上有没有这个属性。''

5.2构造函数的prototype指向谁，new 出来的玩意儿的__proto__就指向谁！！！

这个__proto__有'原型链查找功能''

function People(name,age,sex) {
	this.name =name;
	this.age =age;
	this.sex =sex;
}
People.prototype ={
	"teacher":"kao",
	"sada":12,
}
var ming =new People('ming',12,'nan');
alert(ming.teacher); //kao
alert(ming['teacher']); //kao


People.prototype=Math; 						//Math所属对象None
var ming =new People('ming',12,'nan');
alert(ming.random());

ming身上虽然没有random属性，但是小明的__proto__身上有这个属性，
所以ming能够打点调用random属性。

5.3在原型上定义方法

刚才知道如果'把函数写在构造函数里面'，就相当于'定义在了对象上'，
'此时函数会产生多个不用的副本，影响程序效率，''
此时可以把函数'定义在构造函数的原型'上，
这样所有new出的东西， __proto__就会指向这个对象，从而能够使用这个方法。

function People(name,age,sex) {
	this.name =name;
	this.age =age;
	this.sex =sex;
}
People.prototype.funName=function () {				//important
	console.log(this);
	console.log("woshi:"+this.name+"!nianling:"+this.age);
};
var ming =new People('ming',12,'nan');
var hong =new People('hong',13,'nv');
console.log(ming.funName());
console.log(ming.funName==hong.funName);	//true
console.log(ming.funName);

			People {name: "ming", age: 12, sex: "nan"}
				age: 12
				name: "ming"
				sex: "nan"
				__proto__:
					funName: ƒ ()
					constructor: ƒ People(name,age,sex)
					__proto__: Object
			woshi:ming!nianling:12,
			VM2101:1 ƒ () {console.log(this);
				console.log("woshi:"+this.name+"!nianling:"+this.age);
			}

5.4构造函数和实例的关系

构造函数：抽象，定义的是一类对象应该具有什么属性，什么方法， 描述规则，描述蓝图。

实例：具体，根据规则、蓝图创建的一个个具体的实例，它能拥有属性，并且能调用方法。

构造函数中，我们用prototype来定义方法，
'定义的是构造函数的 实例 的方法'，不是构造函数的方法。

	<input type="button" value="为所有🐕吃饭" id="btn">
	<script type="text/javascript">
		var dogArr=[];
		function Dog(name,w) {
			console.log(this);
			/* Dog {} 
				name: "bai",
				w: 100,
				__proto__: Object
			*/ 
			this.name =name;
			this.w =w;
			dogArr.push(this);
		}
		Dog.prototype.eat=function () {				//important
			console.log(this);
			// console.log("woshi:"+this.name+"!nianling:"+this.age);
			this.w +=10;
		};
		var bai =new Dog('bai',100);
		console.log(bai);
		/*
		Dog {name: "bai", w: 100}
			name: "bai"
			w: 100
			__proto__: Object
		*/
		var hei =new Dog('hei',90);
		document.getElementById('btn').onclick=function () {
			for(var i=0 ; i<dogArr.length ; i++){
				dogArr[i].eat();
				console.log(dogArr[i].name + ':' +dogArr[i].w);
			}
		}		//加引号
	</script>