资源描述:
《javascript原型继承工作原理和实例详解_javascript技巧》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、javascript原型继承工作原理和实例详解先为大家分享JS原型继承实例,供大家参考,具体内容如下一、JS原型继承JS原型继承//cloneO函数用来创建新的类Person对象varclone二function(obj){var_f=function(){};//这旨是原型式继承最核心的地方,函数的原型对象为对象字而量_f.prototype=obj;retur
2、nnew_f;}"〃先声明一个对彖字而量varAnimal={somthing:'apple,,eat:function(){consolc.1og(〃C3t"+this・somthing);}}〃不需要定义一个Person的子类,只要执行一次克隆即可varCat二clone(Animal);//可以直接获得Person提供的默认值,也可以添加或者修改屈性和方法console,log(Cat・eat());Cat・somthing='orange,;console,log(Cat.eat());〃声明了类,执行一次克隆即可varSomeone=clone(Cat);
3、y>二、JavaScript原型继承工作原理JavaScript采用原型继承这事儿是众所皆知的,但由于它默认只提供了一个实现的实例,也就是new运算符,因此对于它的解释总是令人困惑,接下来阐明什么是原型继承以及在JavaScript中究竟如何使用原型继承。原型继承的定义当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字:当杳找一个对象的屈性时,JaveiScEpt会向上遍历原型链,直到找到给定名称的屈性为止。岀iJavaScript秘密花园大多数JavaScript的实现用—proto_属性来表示一个对彖的原型链。在这篇文章里我们将看到—proto_与prototype的区别何在。注:
4、_proto_是一个不应在你代码中出现的非正规的用法,这里仅仅用它來解释JavaScript原型继承的工作原理。以下代码展示了JS引擎如何查找属性:functiongetProperty(obj,prop){if(obj.hasOwnProperty(prop))returnobj[prop]elseif(obj・_proto—!==null)returngetProperty(obj._proto_,prop)elsereturnundefined}让我们举一个常见的例子:二维点,拥有二维坐标Xy,同似拥有一个print方法。用Z前我们说过的原型继承的定义,我们创建一个对象Point,拥有三
5、个属性:x,y和printo为了能创建一个新的二维点,我们需要创建一个新的对象,让他其中的—proto—属性指向Point:varPoint={x:0,y:o,console,log(this,x,this,y);}print:function()varp={x:10,y:20,―proto_:Point};p.print();//1020JavaScript怪异的原型继承令人困惑的是,每个教授原型继承的人都不会给出这样一段代码,反而会给出下面这样的代码:functionPoint(x,y){this,x二x;this,y二y;1jPoint.prototype={print:function
6、(){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运算符必须针对函数。我们需要将对象的方法放到一个地方去,既然我们
7、在用原型语言,我们就把它放到函数的原型屈性小去。new运算符接受一个函数F及其参数:newF(arguments...)o这一过程分为三步:创建类的实例。这步是把-个空的对象的_proto_属性设置为F.prototype。初始化实例。函数F被传入参数并调用,关键字this被设定为该实例。返回实例。现在我们知道了new是怎么工作的,我们可以用JS代码实现一下:functionNew(f){varn