关于prototype 属性
函数(functions)在javascript中本身就是对象,它有方法和属性。关于函数的属性,prototype是比较重要的一个。
function foo(a,b){
return a*b;
}
typeof foo.prototype;//object
可以为prototype添加属性,
foo.prototype={}
这个属性对foo函数没有任何影响,仅仅当foo作为构造函数的时候。prototype才会有意义.
给prototype添加属性和方法
前几节学过的用构造函数创建对象,主要的思路还是用new操作符访问this。这个this包含了构造函数返回的对象。我们可以往this里添加属性和方法也就是,也就是给这个对象添加了属性和方法。让我们看看下列的代码
function Gadget(name,color){
this.name=name;
this.color=color;
this.whatAreYou=function(){
return 'I am a '+this.color+' '+this.name;
}
}
添加属性和方法到prototype中,是另一种给对象添加功能的方法。让我们添加下price和rating和getInfo().
Gedget.prototype.price = 100;
Gedget.prototype.rating= 3;
Gedget.prototype.getInfo=function(){
return 'Rating: '+this.rating+',price: '+this.price;
}
如果你感觉这么写很麻烦我们也可以用到以前创建对象所用到的方法
Gadget.prototype = {
price: 100,
rating: 3,
getInfo: function() {
return 'Rating: ' + this.rating + ', price: ' + this.price;
}
};
这两种方法都是一样的。
调用Prototype的属性和方法
所有的属性和方法都可以添加到prototype中,对于对象是直接可以访问的。如果创建了一个对象,就可以访问所有的属性和方法了。
var newtoy = new Gadget('webcam','black');
newtoy.name;//webcam
newtoy.color;//black
newtoy.whatAreYou();//I am black webcam
newtoy.price;//100
newtoy.rating;//3
newtoy.getInfo();//Rating:3,price:100
对象的传递,实质上传递的是个引用,也就意味这每次创建个对象,prototype属性并不是复制而成,这样就可以动态的修改prototype的属性,所有创造的对象的属性也就会随着prototype的更改而更改。代码如下
Gadget.prototype.get=function(what){
return this[what];
}
newtoy.get('price');//100
newtoy.get('color');//'black'
newtoy对象是在get方法建立之前而生成的,但是newtoy还是可以访问get方法的。这就是prototype的妙处。
自身属性和prototype属性的对比
在上个例子中getInfo这个方法,用的是this来调用rating和price的。当然也可以用Gedget.prototype来重写这个方法
Gadget.prototype.getInfo = function() {
return 'Rating: ' + Gadget.prototype.rating + ', price: ' + Gadget.prototype.price;
};
这个上面的方法有什么不同?首先要了解prototype更多的细节问题.
var newtoy = new Gadget('webcam','black');
当访问newtoy.name的时候,Javascript引擎会检索这个对象的所有属性直到找到name的属性,并返回它的值。
newtoy.name;//webcam
如果访问rating会怎么样呢?Javascript引擎首先会检索这个对象的所有属性,发现并没有叫rating这个属性。然后再去找创造这个对象的构造函数的prototype(也就是newtoy.constructor.prototype).如果这个属性找到就返回。
newtoy.rating;//3
当然这么访问和如下代码是一样的
newtoy.constructor.prototype.rating;//3
对prototype的属性进行重写
前几个例子说明了如果没有自身的属性,就会找prototype的属性。下面引出了这样一个问题,如果自身的属性和prototype的属性都一样的话,会怎么样呢。看如下代码
function Gadget(name) {
this.name = name;
}
Gadget.prototype.name = 'foo';//foo
在创建一个新的对象
var toy = new Gadget('camera');
toy.name;//camera
发现了toy.name的值是camera.这就相对于prototype的name属性进行重写。
delete toy.name;//true
toy.name;//foo
如果删除自身属性name,prototype的属性name就生效了
当然你可以重新创建toy的属性
toy.name='camera';
toy.name;//camera
分享到:
相关推荐
javascript prototype文档
javascript Prototype 对象扩展.docx
javascript prototype原型操作笔记.docx
JavaScript_Prototype(源代码+中文手册)
NULL 博文链接:https://miyulano.iteye.com/blog/1678239
轻松建立有高度互动的web2.0特性的富客户端页面
javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触...
JavaScriptprototype的深度探索不是原型继承那么简单.pdf
javascript的prototype继承
NULL 博文链接:https://butterflymacro.iteye.com/blog/1271789
之前写的一篇JavaScript 命名空间博客提到过JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。 function Obj(){ var a=0; //私有变量
Prototype javascript框架 js and ajax 的方便
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...
JavaScript中prototype的使用
jQuery、Mootools、Prototype三大JavaScript框架中文手册
JavaScript使用prototype定义对象类型
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很...
JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools
主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下