通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法);造成了一定的资源浪费
 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属性

运行结果:

 总结:

  1. JavaScript的继承机制主要是基于prototype的。
  2. 构造函数生成实例化对象;构造函数的prototype属性就是实例化对象的原型对象;原型对象上的属性和方法被所有实例化对象所共享!
  3. 原型链一般往上回溯可以回溯到Object.prototype;Object.prototype的原型对象是null;而null的原型对象不存在!
  4. 原型对象上有construtor属性,等于构造函数名;因为是定义在原型对象上,所以被所有实例对象共享(由此我们也可以间接调用构造函数生成实例对象)!
  5. Object.getPrototypeOf():获取某个对象的原型;不能获取null或者undefined的原型
  6. Object.setPrototypeOf():第一个参数是现有对象,第二个是原型对象;返回一个新对象
  7. Object.create():以参数为原型对象生成新对象
  8. __proto__属性:设置对象的原型对象;尽量减少使用该属性
  9. instanceof:判断对象是否是某构造函数的实例对象

自己用Excel画的一张图:

 参考:阮一峰JavaScript标准参考教程

JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)的更多相关文章

  1. JavaScript学习笔记之原型对象

    本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...

  2. 理解js的prototype原型对象

    我们创建的每一个函数都有一个prototype(原型)属性.这个属性是一个指针,指向一个对象,而这个对象的用途是包括能够由特定类型的全部实例共享的属性和方法.假设依照字面意思来理解,那么prototy ...

  3. 原型和原型对象(__proto__和prototype)转

    看了之后我总算对原型继承有了更深刻的理解,做爱分享的姑娘,原文链接:理解Javascript 原型 我(个人)不喜欢的,就是讲原型时上来就拿类做比较的,所以我不会这样讲.不过我的确讲过构造器函数,在这 ...

  4. JavaScript 原型链学习(三)原型对象存在的问题 与 组合使用构造函数和原型

    原型对象也不是没有缺点.首先,它省略了为构造函数传递初始化参数这一环节, 结果所有实例在默认情况下都将取得相同的属性值.虽然这会在某种程度上带来一些不方便, 但还不是原型对象的最大问题.原型对象的最大 ...

  5. 简单理解javascript中的原型对象,实现对之间共享属性和行为

    javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...

  6. JavaScript高级程序设计之原型对象

    构造函数.原型对象.构造器是一体的关系,同时产生: 实例中的隐藏属性__proto__指向原型对象: 原型对象是这四种关系的纽带. 原型对象是动态的,不论在何处变化,实例中可以立即体现出来. var ...

  7. javascript(三):对象

    对象(object)是javascript中很重要的数据类型.对象是“键值对”的集合,同时也是无序的.(注意:对象结尾处有分号) var ob1={ a1:'name',//a1可以加引号或者不加 a ...

  8. js之prototype 原型对象

    原型对象prototype可以这么理解,是该类的实例对象的模板,每个实例对象都是先复制一份该类的prototype,通过这个可以让类的实例拥有相同的功能   String.prototype.say= ...

  9. js学习(四)- prototype原型对象

    前言: 下面两行代码都是创建一个数组对象myArray:var myArray=[];//等价于var myArray=new Array();同样,下面的两段代码也都是创建一个函数myFunctio ...

随机推荐

  1. intelliJ IDEA安装、激活与汉化

    1.去intelliJ IDEA 官网下载idea,选择Ultimate版本(非免费版,community免费但功能较少) 2.开始安装 3.选择好路径 4.选择在桌面创建的快捷方式(注意32bit和 ...

  2. Arduino上传数据至贝壳物联并与FPGA进行交互

    本篇实现Arduino与FPGA交互,当然也没有什么新的协议,还是基于串口通讯,现在学一个串口通信基本上可以驱动大多数模块了,而且和各种单片机无缝数据交互,Arduino由于其强大的库函数支持,在实现 ...

  3. 学习一门新语言需要了解的基础-12 if和switch对比

    本节内容 是否存在性能差异 使用场景 反汇编对比[付费阅读] 之前初步接触了汇编,然后利用汇编简单了解下函数调用的过程,包括怎么样保护堆栈帧现场和恢复现场.另外做了简单的函数调用参数复制,返回值的传递 ...

  4. js返回到上一个页面刷新与不刷新的写法

    返回上个页面刷新: <script>window.location.href=document.referer</script> 返回上个页面不刷新 <script> ...

  5. windy数(数位DP)

    windy数Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:165888KB     64bit I ...

  6. echarts2.2.7本地搭建

    1.首先下载echarts2.2.7,解压到本地,解压后的目录如下: 2.在WebContent下建立一个名为build的目录,复制echarts2.2.7下面的build下面的dist目录到ecli ...

  7. sed基本常用命令

    sed的基本操作 sed 's/a/b/g' 文件a 把文件a中的a修改成b 注意这只是临时的 注:s就是所有的意思,g是缓存区的意思 sed -i 's/a/b/g' 文件a 把文件a中的a修改成b ...

  8. Even Tree 小议

    原题链接:https://www.hackerrank.com/challenges/even-tree/problem 思路:把树还原出来,对每个结点,计算以该结点为根的子树结点数.子树结点数为偶数 ...

  9. 记Javascript的编写方式的全新学习

    前言 这次有幸参与前端的工作,对于前端开发学习了不少新知识,在此记录一下相比之前,完全不同的Javascript编写方式. 原来的编写方式 之前也是写过Javascript,就是常见的.js 文件写函 ...

  10. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...