JavaScript OOP（三）：prototype原型对象（即构造函数的prototype属性）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

通过构造函数生成的实例化对象， 无法共享属性或方法 (即每个实例化对象上都有构造函数中的属性和方法)；造成了一定的资源浪费

 function Obj(name,age){

     this.name=name;

     this.age=age;

     this.func=function(){

         return 'this is a test function';

     };

 }

 var o1=new Obj('小明',10);

 var o2=new Obj('小白',12);

 console.log(o1.func===o2.func);

运行结果：

我们可以看出所有实例化对象（即o1,o2）中的func()都相同。但是每个对象都新建了func()方法，显得多余且浪费资源

为了解决上述问题，就要用到 JavaScript的prototype对象 ：起到 共享某些相同属性和方法 的作用！

JavaScript的对象都继承自"原型"对象 (与java、c++中类相似的作用);除了null,null没有自己的原型

JavaScript原型设计机制：原型上面的属性和方法，都能够被子对象共享

 function Obj1(name,age){

     this.name=name;

     this.age=age;

 }

 Obj1.prototype.address='beijing';//原型上的属性被所有实例化对象共享

 Obj1.prototype.begin=function(){//原型上的方法被所有实例化对象共享

     return 'this is a begin function';

 };

 var o3=new Obj1('晓明',100);

 var o4=new Obj1('你猜',90);

 console.log(o3,o4);

 console.log(o3.address,o4.address);

 console.log(o3.begin(),o4.begin());

运行结果：

但是实例化对象的属性或方法可能 覆盖原型对象上的属性或方法

 o3.address='shanghai';

 o3.begin=function(){

     return 'this is a begin function for o3';

 };

 console.log(o3.address,o3.begin());

运行结果：

实际上所有函数都有自己的原型对象 ；因为函数在广义上可以认为是对象

对象能作为其他对象的原型对象，也能作为原型对象的实例化对象，由此形成了prototype chain原型链

所有的对象的原型对象如果一层层往上“回溯”，最后可以回溯到Object.prototype;而Object.prototype的原型对象是null,null没有自己的原型对象

 console.log(Object.getPrototypeOf(Object.prototype));

运行结果：

表明Object.prototype的原型对象是null

如果 尝试获取null或undefined的原型对象 ：

 console.log(Object.getPrototypeOf(null));//报错 Cannot convert undefined or null to object

注意：读取对象的某个属性时，js引擎会先在对象本身属性上寻找，如果找不到，那么去原型对象上找，一层一层往上"回溯",直至null.所以如果找寻某个不存在的属性，会将完整的原型链遍历一变，对性能影响较大。

constructor属性 ： prototype原型对象有一个constructor属性 ，默认指向prototype所在的构造函数

 var O5=function(){};

 O5.prototype=new Array();//O5的prototype属性等于new Array();那么O5的实例化对象共享着Array对象的所有属性和方法，并且O5.prototype的constructor也与Array.prototype的constructor一样

 // O5.prototype.constructor=O5;

 var o6=new O5();

 o6.push(1,2,3);

 console.log(o6);

 console.log(O5.prototype.constructor===Array.prototype.constructor);//true

运行结果：

因为 constructor属性定义在prototype上 ，所以 所有实例对象都能访问

 var a1=new O6();

 var a2=new O6();

 console.log(a1.constructor===a2.constructor && a1.constructor===O6.prototype.constructor);

运行结果：

所以使用constructor属性，能确定对象使用的构造函数 ； 同时我们可以根据constructor属性，间接调用构造函数

 var a3=new a2.constructor();

 console.log(a3.constructor===a1.constructor);//true

注意原型对象被覆盖可能出现的问题：

 function Abc(){};

 Abc.prototype.constructor=Abc;

 Abc.prototype.f=function(){

     console.log('hello');

 };

 var a4=new Abc();

 console.log(a4.constructor===Abc.prototype.constructor);

 Abc.prototype={

     f1:function(){

         console.log('hi');

     }

 };//此时，定义Abc.prototype为一个新对象，原先定义在prototype上面的属性和方法均失效

 //所以调用原先prototype的f方法，报错

 var a5=new Abc();

 //a5.f();//a5.f is not a function

 //但是能调用新定义的属性或方法

 a5.f1();//'hi'

运行结果：

name属性 ，可以查看构造函数的名字

 function Obj2(){};

 var o7=new Obj2();

 console.log(o7.constructor.name);//Obj2

运行结果：

总结起来 : 1. 构造函数生成对象；构造函数的原型(prototype)属性上面定义的方法或属性被所有实例化对象共享；构造函数的原型属性是实例对象的原型对象。

2. constructor属性时定义在构造函数的prototype属性(原型对象)，被所有实例化对象共享；所以实例化的对象能够直接调用constructor属性

3. 原型对象=构造函数的prototype属性

instanceof 关键字 ： 判断对象是否为构造函数的实例

 function Obj3(){};

 var o8=new Obj3();

 console.log(o8 instanceof Obj3);

 console.log(o8 instanceof Object);

 //instanceof对整个原型链上对象均有效

 var n1=new Number(10);//var n1=new Object(10);

 console.log(n1 instanceof Number,n1 instanceof Object);//true true

 // o8 instanceof Obj3等同于Obj3.prototype.isPrototypeOf

 console.log(Obj3.prototype.isPrototypeOf(o8));//true

 //可以翻译成Obj3构造函数的prototype(原型)属性是o8的原型对象

 //null,undefined instanceof Object均为false

运行结果：

Object.getPrototypeOf()：获取一个对象的原型对象

 //console.log(Object.getPrototypeOf(null),Object.getPrototypeOf(undefined));//Cannot convert undefined or null to object

不能获取null或者undefined的原型对象

function test1(){}

console.log(Object.getPrototypeOf(test1));

console.log(Object.getPrototypeOf(test1)===Function.prototype)

function Test(){}

var t1=new Test();

console.log(Object.getPrototypeOf(t1));

console.log(Object.getPrototypeOf(t1)===Test.prototype);

运行结果：

Object.setPrototypeOf(): 第一个参数是现有对象，第二个是原型对象；返回一个新对象

 var a={

     name:'apple',

     f:function(){

         console.log('this is a test function');

     }

 };

 var o9=Object.setPrototypeOf({},a);

 //o9本身是空对象，它的原型对象是a;o9能调用a的属性和方法

 console.log(o9);

 console.log(o9.name);//apple

 o9.f();

运行结果：

所以我们通过 构造函数生成实例化对象 ，本质其实就是 将构造函数的property属性赋值给实例对象的原型对象

 function F(){};

 var f1=new F();

 console.log(f1);

 /**

  * 相当于

  * var f1=Object.setPrototypeOf({},F.prototype);

  * F.call(f1);//调用F函数，this指向f1

  */

Object.create()使用场景：

有时候，我们不能拿到对象的构造函数，只能取到实例对象；比如如下生成的：

 var o10={

     name:'chrome',

     speed:'fast'

 };

o10是一个实例对象，但是并不是很容易找到它的构造函数

那么如何以o10为原型，另外生成一个实例对象？使用Object.create()

 var o11=Object.create(o10);

 console.log(o11);

 console.log(o11.name,o11.speed);

 console.log(Object.getPrototypeOf(o11)===o10);//true;说明o11的原型对象等于o10

运行结果：

Object.prototype.isPrototypeOf：判断是否是某个对象的原型对象

 console.log(o10.isPrototypeOf(o11));//true;o10是o11的原型对象

 console.log(o11.isPrototypeOf(o10));

 console.log(Object.prototype.isPrototypeOf(null));//除了null或者Object.create(null)生成对象，其它对象的原型对象往原型链回溯一定可以回溯到Object.prototype

 console.log(Object.prototype.isPrototypeOf(Array));

运行结果：

__proto__: 内部属性，不应该对使用者显露；尽量减少使用这个属性

__pro__：设置对象的原型对象 ；其实 一般都可以用Object.getPrototypeOf()和Object.setPrototypeOf()替代

 var o12={

     name:'apple',

     age:100

 };

 var o13={

     sex:'male',

     email:'qq@com'

 };

 o12.__proto__=o13;

 console.log(Object.getPrototypeOf(o12)===o13);

 //即__pro__是指定对象的原型对象，也就是构造函数的prototype属性

运行结果：