可以通过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. ubuntu debain下好用的编辑器

    geany: 轻量级的IDE apt-get install geany 用来写shell脚本和python十分方便.特别写python脚本时,它有丰富的提示和自动补全功能.查看代码也很方便

  2. 方格取数洛谷p1004

    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...

  3. ES6模块化

    关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...

  4. Django学习(2)数据宝库

    数据库是一所大宝库,藏着各种宝贝.一个没有数据库的网站,功能有限.在Django中,支持的数据库有以下四种: SQLite3 MySQL PostgreSQL Oracle 其中SQLite3为Dja ...

  5. python 生成html文件(表格)

    import pandas as pd def convert_to_html(result,title): d = {} index = 0 for t in title: d[] = result ...

  6. bitcms内容管理系统 3.1版源码发布

    开源bitcms内容管理系统采用ASP.NET MVC5+MySql的组合开发,更适应中小型系统低成本运行. bitcms的主要功能 1.重写了APS.NET MVC的路由机制.bitcms使用路由参 ...

  7. 参加完Rocket MQ Meetup深圳站,回顾和想法

    最近一段时间才开始关注云栖社区的公众号,在两周前看到要在深圳科兴科学园办一场Rocket MQ的Meetup.因为从来没有参加过这种线下活动,而且对Rocket MQ比较感兴趣,所以就立即报名参加. ...

  8. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  9. Lucene41PostingWriter源代码分析

    原来看lucene4.0的posting格式(http://blog.csdn.net/jollyjumper/article/details/30017581),发现这还是比較简单的VInt格式,据 ...

  10. 迭代var()内置函数的时候出现RuntimeError: dictionary changed size during iteration的解决办法

    下午看了Mr Seven的教学视频,其中有一段讲全局变量的视频,迭代输出全局变量的时候报错了. 视频中的做法: for k,v in vars().items(): print(k) 打印结果 for ...