可以通过prototype来为已经定义好的的"类"添加属性和方法。这里来了解一下prototype的基础知识。prototype是"构造函数"的属性,不是实例的属性.

示例:

function HiClass() {
this.sayHi = function(){
alert("hi");
}
} var obj = new HiClass();
alert(HiClass.prototype);//outputs [object, object]
alert(obj.prototype);//outputs undefined

在用prototype的方式实现继承一个类的时候,要注意其可能覆盖别的prototype方式添加的属性和方法。如果HiClass.prototype.prop = 'value'是在HiClass.prototype = new HelloClass()之前则不会有prop属性,如果在执行HiClass.prototype = new HelloClass()之后,HiClass的实例中会有prop属性,这个应该很好理解。但是要注意代码中不要不小心存在这样的bug。

示例:

function HiClass() {
this.sayHi = function(){
alert("hi");
}
} function HelloClass() {
this.sayHello = function(){
alert("hello");
}
}
//HiClass.prototype.prop = 'value'; //this.prop = function(){}写法是可以继承的,两种写法有区别滴
HiClass.prototype = new HelloClass();
HiClass.prototype.prop = 'value'; var obj = new HiClass();
obj.sayHello();
alert(obj.prop);

在JavaScript中有一个prototype链,在对一个对象实例上调用方法或者获取属性的时候,先看实例对应的类有没有对应的定义,没有的话会沿着prototype链一直找,找不到则为undefined。如果某类都有

定义,则调用本身的定义。Object.prototype.foo = function(){}会对所有以定义的方法起作用,javascript中Object对象是所有对象的基类

示例:

function Object2() {
this.sayHi = function(){
alert("hi Object2");
}
} function Object3() {
this.sayHi = function(){
alert("hi Object3");
} this.sayHello = function(){
alert("hello Object3");
} } Object2.prototype = new Object3(); var obj = new Object2();
obj.sayHi(); //hi Object2 调用obj.sayHi();的时候,sayHi在Object2里已经定义,则调用本身的定义。
obj.sayHello(); //hi Object3 Object.prototype.foo = function(){ //会对所有以定义的方法起作用,javascript中Object对象是所有对象的基类
alert("f00 Object");
};
obj.foo(); //f00 Object
Object2.foo(); //f00 Object
Object3.foo(); //f00 Object
a.foo(); //报错

如果在实例里添加的属性和方法与prototype里的属性和方法重名,相对于实例和prototype都有这个属性和方法,只是由于prototype链的访问顺序,先访问到实例中的属性和方法。如下面的例子说明了这一点

function Test(){};  

Test.prototype.prop1 = 'prop value';  

var obj = new Test();  //obj如果是一个方法又不一样喽;obj.prototype = new Test();不会继承滴

obj.prop1 = 'instance value';  

alert(obj.prop1 );//outputs instance value  

alert(obj.hasOwnProperty("prop1"));//outputs true  

delete obj.prop1;alert(obj.prop1 ); //outputs prop value  由于prototype链的访问顺序,先访问到实例中的属性和方法,删除的是第一个属性
alert(obj.hasOwnProperty("prop1"));//outputs false
alert("prop1" in obj);//outputs true delete Test.prototype.prop1;alert(obj.prop1 );//outputs undefined

再来看看一些构造函数和prototype的使用:

var myObj = {
prop1:'value1',
prop2:'value2'
} Object.prototype.foo = function(){
alert("f00 Object");
}; //等价于
//var myObj = new Object();
//myObj.prop1 = 'value1';
//myObj.prop2 = 'value2'; alert(myObj.prop2); //value2
myObj.foo(); // f00 Object

同时也可以如下的方式对prototype赋值,可以一次添加多个属性和方法

function TestCls(){  

}
TestCls.prototype = { //可以一次添加多个属性和方法
prop1:'value1',
prop2:'value2'
};
myObj = new TestCls();
alert(myObj.prop2); //value2

上面的做法中有一个问题是改变prototype后,constructor也改变了。
所以要将prototype.constructor之前的值,比如第一个例子中要加上 HiClass.prototype.constructor=HiClass;constructor 属性返回对创建此对象的数组函数的引用

//上面的做法中有一个问题是改变prototype后,constructor也改变了。
//所以要将prototype.constructor之前的值,比如第一个例子中要加上 HiClass.prototype.constructor=HiClass
function HiClass() {
this.sayHi = function(){
alert("hi");
}
} function HelloClass() {
this.sayHello = function(){
alert("hello");
}
} HiClass.prototype = new HelloClass();
HiClass.prototype.constructor=HiClass //constructor 属性返回对创建此对象的数组函数的引用。

prototype为对象添加属性和方法的更多相关文章

  1. javascript面向对象(给对象添加属性和方法的方式)

    1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法         var g ...

  2. 继承:《原型和原型链(prototype 属性使您有能力向对象添加属性和方法。)》

    二. 原型对象   在JavaScript 中,每当定义一个对象(函数)时候,对象中都会包含一些预定义的属性.其中函数对象的一个属性就是原型对象 prototype.注:普通对象没有prototype ...

  3. 275 原型与原型链:显式原型prototype ,隐式原型__proto__,隐式原型链,原型链_属性问题,给原型对象添加属性/方法

    1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...

  4. JS内置对象的原型不能重定义?只能动态添加属性或方法?

    昨天马上就快下班了,坐在我对面的同事突然问我一个问题,我说“爱过”,哈哈,开个玩笑.情况是这样的,他发现JS的内置对象的原型好像不能通过字面量对象的形式进行覆盖, 只能动态的为内置对象的原型添加属性或 ...

  5. 【JavaScript】浅析JavaScript对象如何添加属性和方法

    向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...

  6. js学习(一)-动态添加、修改、删除对象的属性和方法

    //-----------------------js代码--------------------------- function class1(){ } //-------------------- ...

  7. 转: javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  8. javascript动态添加、修改、删除对象的属性与方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  9. Python笔记_第三篇_面向对象_8.对象属性和类属性及其动态添加属性和方法

    1. 对象属性和类属性. 我们之前接触到,在类中,我们一般都是通过构造函数的方式去写一些类的相关属性.在第一次介绍类的时候我们把一些属性写到构造函数外面并没有用到构造函数,其实当时在写的时候,就是在给 ...

随机推荐

  1. JAVA的向上转型和向下转型怎么理解呢?

    在定义中是子类向父类转型称为向上转型,父类向子类转型是向下转型(必须先向上转型过,才能向下转型), 但是在下面类定义后,我得到的结果却不同.求大佬解惑 class superclass{ public ...

  2. Django框架中的视图和模板

    视图views django中的视图就是用来定义函数来处理一些逻辑的核心地方. django中通过urls来建立路径跟views中的视图函数的映射关系. urls中的映射关系 ''' urlpatte ...

  3. vue.js事件,属性,以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  4. mysql数据库的安装及体系说明

    第1章 MySQL介绍 1.1 数据的定义 数据是指对客观事件进行记录并可以鉴别的符号,是对客观事物的性质.状态以及相互关系等进行记载的物理符号或这些物理符号的组合,是可识别.抽象的符号 1.2 数据 ...

  5. Ubuntu 16.04 安装wine QQ

    1.进入 http://www.ubuntukylin.com/application/show.php?lang=cn&id=279下载Wine QQ 2.解压压缩包 3.将文件夹中三个de ...

  6. Excel大写和小写转换函数

    Excel中的大写和小写转换函数 (1).转换为所有小写字母:lower函数 (2).转换为所有大写字母:upper函数 (3).转换为首字母大写,其余小写字母:proper函数 三种函数的使用方式. ...

  7. 機器學習基石 (Machine Learning Foundations) 作业1 Q15-17的C++实现

    大家好,我是Mac Jiang.今天和大家分享Coursera-台湾大学-機器學習基石 (Machine Learning Foundations) -作业1的Q15-17题的C++实现. 这部分作业 ...

  8. java.lang.IllegalStateException: attempt to re-open an already-closed object

    attempt to re-open an already-closed object 字面理解,试图再次打开已经关闭的对象.这是我在操作sqlited的时候出现的错误, 我在一个activity里面 ...

  9. SSRS Fields cannot be used in page headers or footers

    问题环境:SSRS 2005 报表开发 尝试在Page Header中使用Data Set的字段,遇到以下的错误: The value expression for textbox '' refers ...

  10. Android 夜间模式changeskin小结

    @author vivian8725118 @CSDN http://blog.csdn.net/vivian8725118 @简书 http://www.jianshu.com/p/832e9776 ...