js复习基础总结-原型与原型链

原型与原型链

• 所有函数都有一个特别的属性:
  • prototype : 显式原型属性
• 所有实例对象都有一个特别的属性:
  • __proto__ : 隐式原型属性
• 显式原型与隐式原型的关系
• 函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象一个空对象
• 实例对象的__proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值
• 原型对象即为当前实例对象的父对象
• 原型链
  • 所有的实例对象都有__proto__属性, 它指向的就是原型对象
  • 这样通过__proto__属性就形成了一个链的结构---->原型链
  • 当查找对象内部的属性/方法时, js引擎自动沿着这个原型链查找
  • 当给对象属性赋值时不会使用原型链, 而只是在当前对象中进行操作

构造函数/原型/实例对象的关系

• 1.构造函数/原型/实例对象的关系(图解)

var o1 = new object();
var o0 ={};
//每一个对象都是构造函数function Object的实例化对象。
/*
	o1,o2是函数原型function Object的实例化对象。
	所以o1.__proto__ === Object.prototype
	   o2.__proto__ === Object.prototype
	也就是图片的实例。
*/

• 2.构造函数/原型/实例对象的关系(图解)
  • 每个构造函数都是Function的实例，包括Function()也是也是 通过new Function()得到的。
    

/*
	o1,o1:
	 	是构造函数Foo的实例对象，所以o1,o2.__potot__ === Foo.prototype
	如上图线 ①；
	Foo()
		是function Function()的实例对象。
		所以其中Foo.__proto__ === Function.prototype
	    如图②
	Function():
	   	每个构造函数都是Function的实例，包括Function()也是也是 通过new Function()得到的。
		因此：有一条线路③构成一个回路。③
	Object()：
		也是Function()的实例，因此多了线路 ④
	Foo.prototype:
		是一个空对象，所以也就是Object()的实例。
		所以Foo.prototype.__proto__ === Object.prototype ⑤
	Object.prototype:
	    是空了。
*/
function Foo(){
}
var o1 =new Foo();
var o2 =new Foo();

• Foo(),Object(),Function()都是Function的实例。
• Function原型对象Function.prototype是Object的一个实例。因此Function.prototype.proto === Object.prototype.
• Function隐式原型就是Object的实例对象

案例分析

• 案例1

/*
	true：object()就是Function的实例对象
*/
console.log(Object instanceof Function);   //true

/*
	true ：Object.__proto__ === Function.prototype;
	      Function.prototype.__proto__ === Object.prototype
*/
console.log(Object instanceof Object);    

/*
	true：Function就是Function的实例对象
*/
console.log(Function instanceof Function);

/*
	true:Function隐式原型就是Object的实例对象.上图中有一个循环的圈
*/
console.log(Function instanceof Object);

/*
	false:Foo istanceof Object是对的
*/
function Foo() {}
console.log(Object instanceof  Foo);

• 案例2

  var A = function() {}
  A.prototype.n = 1
  var b = new A()
  A.prototype = {
    n: 2,
    m: 3
  }
  var c = new A()
  console.log(b.n, b.m, c.n, c.m)  // 1 undifined  2  3
/*
	这里注意的是b的__proto__还是指向原来的原型对象。
	A改变后，只有后建立的实例对象才收影响。
*/

• 案例3

var F = function(){};
Object.prototype.a = function(){
	console.log('a()')
};
Function.prototype.b = function(){
   console.log('b()')
};
var f = new F();
/*
	a() ： f.__proto__是一個對象，這個對象又是Object的一個示例
	
*/
f.a() 

/*
	無法找到。报错
*/
f.b()

/*
	a（）
	F.__proto__ === Function.prototype.__proto__ 是一个对象实例。
	Function.prototype.__proto__ == Object.prototype.
*/
F.a()

/*
	b()
	F.__proto__ === Function.prototype
*/
F.b()