javascript中原型（prototype）与原型链

javascript是一门动态语言（动态语言Dynamic Programming Language：动态类型语言，意思就是类型的检查是在运行时做的，也就是常说的“弱类型”语言），没有类的概念，有class保留字，但不能用作变量名

原型：Javascript中的每一个对象都有一个内部私有的连接指向另一个对象，这个对象就是原对象的原型　　注意：原型是一个对象，其他对象可以通过他实现属性继承

原型链：这个原型对象也有自己的原型，直到对象的原型为null为止（也就是没有原型），这种一级一级的链结构就称为原型链

javascript中对象：在javascript中，一个对象就是任何无序键值对的集合，如果它不是一个主数据类型（undefined，null，boolean，number，string），那它就是一个对象

在这里一旦当某个对象的原型所引用的对象的属性被定义，就可以被多个引用它的实例所继承，即这些实例对象的原型所指向的就是这个原型对象。

 

基于原型链的继承：

继承属性：

　　javascript对象有两种不同的属性来源，一个是对象自身属性，另一是继承于原型链上的属性

例：

//假设有一个对象obj={a:1,b:2},并且obj所在的原型链如下：

//{a:1,b:2} ---> {b:3,c:4} ---> null

//a,b是obj自身的属性

//本例中，用“对象.[[Prototype]]”来表示这个对象的原型

alert(obj.a);

//输出1　　证明a是obj自身的属性

alert(obj.b);

//输出2　　证明b是obj自身的属性

//在obj.[[Prototype]]中还有一个‘b’属性，但它不会被访问到。这种情况称为“属性遮蔽”。

alert(obj.c);

//输出4　　c不是obj自身的属性，但是obj.[[prototype]]的属性

alert(obj.d);

//输出undefined　　d既不是obj自身的属性，也不是obj.[[prototype]]的属性

//也不是obj.[[prototype]].[[prototype]]（即null）的属性，原型链已到顶端，没有d属性，返回undefined

View Code

继承函数：

　　javascript中任何函数都可以添加到对象上作为对象的属性。继承函数与继承属性基本没差别，包括“属性遮蔽”（相当于其他语言中的方法重写）　　注意：当继承的函数被调用时，this指向的是继承的对象，而不是函数被声明的原型对象

例：

var obj={

　　a:2,

　　m:function(b){

　　　　return this.a+1;

　　}

};

alert(obj.m());　　//输出3，当调用obj.m时，‘this’指向了obj

var p=Object.create(obj);　　//p是一个对象，p.[[Prototype]]是obj

p.a=12;　　//创建p的自身属性a

alert(p.m());　　//输出13，当调用p.m时，‘this’指向了p，‘this.a’则是12

View Code

创建对象和生成原型链的不同方法：

使用普通方法创建对象：

例：

var obj={a:1};

//obj这个对象继承了Object.prototype上面的所有属性，所以可以使用obj.hasOwnProperty('a')

//hasOwnProperty是Object.prototype的自身属性，而Object.prototype的原型为null，如下：

//obj ---> Object.prototype ---> null


var a=["one","two","three"];

//数组都继承于Array.prototype，继承者继承其一些方法，如：indexOf,forEach，原型链如下：

//a ---> Array.prototype ---> Object.prototype --->null 


function F(){

　　return 2;

}

//函数都继承于Function.prototype，继承者继承其一些方法，如：call,bind，原型链如下：

//F ---> Function.prototype ---> Object.prototype --->null 

View Code

使用构造函数创建对象：

　　javascript中，构造方法其实就是一个普通的函数。当时用new操作符来作用这个函数时，它就可以被称为构造函数

例：

function Graph(){

　　this.vertexes=[];

　　this.edges=[];

}

Graph.prototype={

　　addVertex:function(v){

　　　　this.vertexes.push(v);

　　}

};

var g=new Graph();

//g是生成的对象，他的自身属性有‘vertexes’和‘edges’

//g被实例化时，g.[[Prototype]]指向了Graph.prototype

View Code

使用Object.create创建对象：
　　ECMAScript 5 中引入了一个新的方法：Object.create 。可以调用这个方法来创建一个新对象。新对象的原型就是调用create方法时传入的第一个参数：

例：

var a={a:1};

//a ---> Object.prototype ---> null


var b=Object.create(a);

//b ---> a ---> Object.prototype ---> null

alert(b.a);

//输出1 （继承而来）


var c=Object.create(b);

//c ---> b ---> a ---> Object.prototype ---> null


var d=Object.create(null);

//d ---> null

alert(d.hasOwnProperty);

//输出undefined，因为d没有继承Object.prototype

View Code

 

性能：

　　在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。

　　遍历对象的属性时，原型链上的每个属性都是可枚举的。

　　检测对象的属性是定义在自身上还是在原型链上，有必要使用 hasOwnProperty 方法，该方法由所有对象继承自 Object.proptotype。

　　hasOwnProperty 是 JavaScript 中唯一一个只涉及对象自身属性而不会遍历原型链的方法

 

相关文章：

　　Angus Croll：JavaScript,JavaScript...

 　　@三月沙 ：理解JavaScript原型

　　

　　Tranch(from MDN)：继承于原型链

更多知识分享：微笑空间站

 

转载于:https://www.cnblogs.com/xuyongsky1234/p/4168438.html