原型原型链笔记

时间 2019-11-09
标签原型笔记繁體版
原文原文链接
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
第一篇

	1,普通对象和函数对象	object	function

		var obj = {};

		var obj = new Object();

		obj.constructor === Object

		obj.__proto__ === Object.prototype	实例的__proto__等于构造函数的原型对象 Object.prototype
	
	2，构造函数
	
		//	每一个对象都有一个 constructor 属性，能够获取它的构造函数。

		//	constructor 构造函数

		//	实例的构造函数属性（constructor）指向构造函数。			*

		
	
	3，原型对象
	
		//	每一个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性
		
		//	原型对象，顾名思义，它就是一个普通对象	Person.prototype = {name:'tom',age:18}
		
		//	在默认状况下，全部的原型对象都会自动得到一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）
		
			结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。

第二篇
	
	4，__proto__
	
		JS 在建立对象（不管是普通对象仍是函数对象）的时候，都有一个叫作__proto__ 的内置属性，用于指向建立它的构造函数的原型对象。			
		Person.prototype.constructor == Person;
		person1.__proto__ == Person.prototype;
		person1.constructor == Person;
		
	5，构造器

		熟悉 Javascript 的童鞋都知道，咱们能够这样建立一个对象：
		var obj = {}
		
		它等同于下面这样：
		var obj = new Object()
		
		obj 是构造函数（Object）的一个实例。因此：
		obj.constructor === Object
		obj.__proto__ === Object.prototype
		
		同理，能够建立对象的构造器不单单有 Object，也能够是 Array，Date，Function , String ,Boolean ,Number ,等。因此咱们也能够构造函数来建立 Array、 Date、Function, 这些构造器都是函数对象
	
	6.原型链
	
		Object.prototype.__proto__ === null;


第三篇
	
	7.函数对象
	
		//	全部函数对象的proto都指向Function.prototype，它是一个空函数（Empty function）

		//	全部的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
		
		Number.__proto__ === Function.prototype  // true
		Number.constructor == Function //true

		Boolean.__proto__ === Function.prototype // true
		Boolean.constructor == Function //true

		// 全部的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
		Object.__proto__ === Function.prototype  // true
		Object.constructor == Function // true

		// 全部的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
		Function.__proto__ === Function.prototype // true
		Function.constructor == Function //true

		Array.__proto__ === Function.prototype   // true
		Array.constructor == Function //true

		Date.__proto__ === Function.prototype    // true
		Date.constructor == Function //true
		
		// 函数声明
		function Person() {}
		// 函数表达式
		var Perosn = function() {}
		console.log(Person.__proto__ === Function.prototype) // true
		
		
		** 全部的构造器都来自于 Function.prototype，甚至包括根构造器Object及Function自身。全部构造器都继承了·Function.prototype·的属性及方法。如length、call、apply、bind **

		//	Function.prototype也是惟一一个typeof XXX.prototype为 function的prototype。其它的构造器的prototype都是一个对象
		console.log(typeof Function.prototype) // function
		console.log(typeof Object.prototype)   // object
		console.log(typeof Number.prototype)   // object
		console.log(typeof Boolean.prototype)  // object
		console.log(typeof String.prototype)   // object
		console.log(typeof Array.prototype)    // object
		console.log(typeof RegExp.prototype)   // object
		console.log(typeof Error.prototype)    // object
		console.log(typeof Date.prototype)     // object
		console.log(typeof Object.prototype)   // object
		
		知道了全部构造器（含内置及自定义）的__proto__都是Function.prototype，那Function.prototype的__proto__是谁呢？
		
		相信都据说过JavaScript中函数也是一等公民，那从哪能体现呢？以下console.log(Function.prototype.__proto__ === Object.prototype) // true、
		
		这说明全部的构造器也都是一个普通JS对象，能够给构造器添加/删除属性等。同时它也继承了Object.prototype上的全部方法：toString、valueOf、hasOwnProperty等
		
		最后Object.prototype的proto是谁？	Object.prototype.__proto__ === null			已经到顶了，为null。(读到如今，再回过头看第五章，能明白吗？)
		


	8，prototype
		
		全部函数对象proto都指向 Function.prototype，它是一个空函数（Empty function）
		
		Object.getOwnPropertyNames(Function.prototype)	因此全部的函数对象都能用
		
	9,复习一下
	
		第八小节咱们总结了：全部函数对象的 __proto__ 都指向 Function.prototype，它是一个空函数（Empty function）
		
		可是你可别忘了在第三小节咱们总结的：全部对象的 __proto__ 都指向其构造器的 prototype
	
	10，原型链(在复习一下)
	
		function Person(){}
		var person1 = new Person();
		console.log(person1.__proto__ === Person.prototype); // true
		console.log(Person.prototype.__proto__ === Object.prototype) //true
		console.log(Object.prototype.__proto__) //null

		Person.__proto__ == Function.prototype; //true
		console.log(Function.prototype)// function(){} (空函数)

		var num = new Array()
		console.log(num.__proto__ == Array.prototype) // true
		console.log( Array.prototype.__proto__ == Object.prototype) // true
		console.log(Array.prototype) // [] (空数组)
		console.log(Object.prototype.__proto__) //null

		console.log(Array.__proto__ == Function.prototype)// true
		
		疑点解惑:
		
			1,Object.__proto__ === Function.prototype // true
				Object 是函数对象，是经过new Function()建立的，因此Object.__proto__指向Function.prototype。（参照第八小节：「全部函数对象的__proto__都指向Function.prototype」）

			2,Function.__proto__ === Function.prototype // true  Function 也是对象函数，也是经过new Function()建立，因此Function.__proto__指向Function.prototype。

			3,	Function.prototype.__proto__ === Object.prototype //true
			
				其实这一点我也有点困惑，不过也能够试着解释一下。
				Function.prototype是个函数对象，理论上他的__proto__应该指向 Function.prototype，就是他本身，本身指向本身，没有意义。
				JS一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向Object.prototype。Object.prototype.__proto__ === null，保证原型链可以正常结束。
	
	11,总结
			
			原型和原型链是JS实现继承的一种模型。
			
			原型链的造成是真正是靠__proto__ 而非prototype
			
			var animal = function(){};
			var dog = function(){};

			animal.price = 2000;
			dog.prototype = animal;
			var tidy = new dog();
			console.log(dog.price) //undefined
			console.log(tidy.price) // 2000
			
			var dog = function(){};
			dog.prototype.price = 2000;
			var tidy = new dog();
			console.log(tidy.price); // 2000
			console.log(dog.price); //undefined
			 
			var dog = function(){};
			var tidy = new dog();
			tidy.price = 2000;
			console.log(dog.price); //undefined
			
			
			实例（tidy）和原型对象（dog.prototype）存在一个链接。不过，要明确的真正重要的一点就是，这个链接存在于实例（tidy）与构造函数的原型对象（dog.prototype）之间，
			而不是存在于实例（tidy）与构造函数（dog）之间。




评论:

	1,博主大部分都分析的能够了，就是原型链没有说清楚，致使评论出现误解，实例没有的属性，js会尝试往原型对象上找，原型对象上没有，再往原型对象的__proto__（Object.prototype）上找，
	
	最终会找到Object.prototype._proto_(他就是原型链的终点null)，找到就返回对应的值，没找到就返回undefined
	
	2,刚听了下同事的讲解，豁然开朗，一个是原型对象，一个是创造自身的原型对象，也能够理解为上一级。
	
笔记:
	
	
	
	
	
	
	
	
	
	</script>
</html>
原型 原型链 笔记

原型原型链笔记
