javascript原型继承工作原理和实例详解
先为大家分享JS原型继承实例，供大家参考，具体内容如下
一、JS原型继承
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>JS原型继承</title>
</head>
<body>
<!--原型继承-->
<scripttype="text/javascript">
//clone()函数用来创建新的类Person对象
varclone=function(obj){
var_f=function(){};
//这句是原型式继承最核心的地方，函数的原型对象为对象字面量
_f.prototype=obj;
returnnew_f;
}
//先声明一个对象字面量
varAnimal={
somthing:'apple',
eat:function(){
console.log("eat"+this.somthing);
}
}
//不需要定义一个Person的子类，只要执行一次克隆即可
varCat=clone(Animal);
//可以直接获得Person提供的默认值，也可以添加或者修改属性和方法
console.log(Cat.eat());
Cat.somthing='orange';
console.log(Cat.eat());
//声明子类,执行一次克隆即可
varSomeone=clone(Cat);
</script>
</body>
</html>
二、JavaScript原型继承工作原理
JavaScript采用原型继承这事儿是众所皆知的，但由于它默认只提供了一个实现的实例，也就是new运算符，因此对于它的解释总是令人困惑，接下来阐明什么是原型继承以及在JavaScript中究竟如何使用原型继承。
原型继承的定义
当你阅读关于JS原型继承的解释时，你时常会看到以下这段文字：
当查找一个对象的属性时，JavaScript会向上遍历原型链，直到找到给定名称的属性为止。——出自JavaScript秘密花园
大多数JavaScript的实现用__proto__属性来表示一个对象的原型链。在这篇文章里我们将看到__proto__与prototype的区别何在。
注：__proto__是一个不应在你代码中出现的非正规的用法，这里仅仅用它来解释JavaScript原型继承的工作原理。
以下代码展示了JS引擎如何查找属性：
functiongetProperty(obj,prop){
if(obj.hasOwnProperty(prop))
returnobj[prop]
elseif(obj.__proto__!==null)
returngetProperty(obj.__proto__,prop)
else
returnundefined
}
让我们举一个常见的例子：二维点，拥有二维坐标xy，同似拥有一个print方法。
用之前我们说过的原型继承的定义，我们创建一个对象Point，拥有三个属性：x，y和print。为了能创建一个新的二维点，我们需要创建一个新的对象，让他其中的__proto__属性指向Point：
varPoint={
x:0,
y:0,
print:function(){console.log(this.x,this.y);}
};
varp={x:10,y:20,__proto__:Point};
p.print();//1020
JavaScript怪异的原型继承
令人困惑的是，每个教授原型继承的人都不会给出这样一段代码，反而会给出下面这样的代码：
functionPoint(x,y){
this.x=x;
this.y=y;
}
Point.prototype={
print:function(){console.log(this.x,this.y);}
};
varp=newPoint(10,20);
p.print();//1020
这和说好的不一样啊，这里Point变成了函数，然后还有个什么prototype的属性，而且有了new运算符。这他喵的是什么情况？
new运算符是如何工作的
造物者BrendanEich想让JS和传统的面向对象的编程语言差不太多，如Java和C++。在这些语言里，我们采用new运算符来给类实例化一个新的对象。所以他在JS里写了一个new运算符。
C++里有用来初始化实例属性的构造函数概念，因此new运算符必须针对函数。
我们需要将对象的方法放到一个地方去，既然我们在用原型语言，我们就把它放到函数的原型属性中去。
new运算符接受一个函数F及其参数：newF(arguments...)。这一过程分为三步：
创建类的实例。这步是把一个空的对象的__proto__属性设置为F.prototype。
初始化实例。函数F被传入参数并调用，关键字this被设定为该实例。
返回实例。
现在我们知道了new是怎么工作的，我们可以用JS代码实现一下：
functionNew(f){
varn={'__proto__':f.prototype};/*第一步*/
returnfunction(){
f.apply(n,arguments);/*第二步*/
returnn;/*第三步*/
};
}
一个小小的例子来看一下他的工作状况：
functionPoint(x,y){
this.x=x;
this.y=y;
}
Point.prototype={
print:function(){console.log(this.x,this.y);}
};
varp1=newPoint(10,20);
p1.print();//1020
console.log(p1instanceofPoint);//true
varp2=New(Point)(10,20);
p2.print();//1020
console.log(p2instanceofPoint);//true
JavaScript中真正的原型继承
JS的ECMA规范只允许我们采用new运算符来进行原型继承。但是大宗师DouglasCrockford却发现了一种可以利用new来实现真正的原型继承的方式！他写下了Object.create函数如下：
Object.create=function(parent){
functionF(){}
F.prototype=parent;
returnnewF();
};
这看起来蛮奇怪的，但却是相当的简洁：它创建了新的对象，并将其原型设置为你想设置的任意值。如果我们允许使用__proto__，那我们也可以这样写：
Object.create=function(parent){
return{'__proto__':parent};
};
下面这段代码就是让我们的Point采用真正的原型继承：
varPoint={
x:0,
y:0,
print:function(){console.log(this.x,this.y);}
};
varp=Object.create(Point);
p.x=10;
p.y=20;
p.print();//1020
结论
我们已经了解了JS原型继承是什么，以及JS如何用特定的方式来实现之。然而使用真正的原型继承（如Object.create以及__proto__）还是存在以下缺点：
标准性差：__proto__不是一个标准用法，甚至是一个不赞成使用的用法。同时原生态的Object.create和道爷写的原版也不尽相同。
优化性差：不论是原生的还是自定义的Object.create，其性能都远没有new的优化程度高，前者要比后者慢高达10倍。
以上就是本文的全部内容，希望对大家的学习有所帮助。