可以通过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. Django contrib Comments 评论模块详解

    老版本的Django中自带一个评论框架.但是从1.6版本后,该框架独立出去了,也就是本文的评论插件. 这个插件可给models附加评论,因此常被用于为博客文章.图片.书籍章节或其它任何东西添加评论. ...

  2. Nginx的知识分享,技术分享

    3. Nginx常用命令管理及升级 查看nginx进程 ps -ef|grep nginx 说明:nginx的进程由主进程和工作进程组成. 启动nginx nginx 启动结果显示nginx的主线程和 ...

  3. 应用教程之帕克西AR虚拟试妆3D动态美妆

    帕克西技术团队通过对美妆行业深度调研,凭借自主研发的人脸识别与面部追踪等技术,打造的超现实AR虚拟试妆应用已成功上线,内置万千妆容,包含口红.眉毛.睫毛等,一点即可试妆,就像照镜子一样简单. 那么,帕 ...

  4. 【tyvj P4868】天天和不可描述

    http://www.tyvj.cn/p/4868 超级水的题,用递归来模拟,用链表保存这层的内容,每遇到一个左括号就递归一层并合并返回的链表,遇到右括号后返回. 递归进入下一层时传递个参数标记读取新 ...

  5. 定义正则new RegExp('abcd')

    一:创建一个正则的两种方式: 例: (1:var reg = /abcd/             "这个叫对象直接量方式": (2:var reg = new RegExp('a ...

  6. 简单用数组模拟顺序栈(c++版)适合新手

    **栈是一种操作受限制的线性表,太多官方的话我也不说了,我们都知道栈元素是先进后出的,它有两种存储结构,分别是顺序存储结构和链式存储结构. **今天我先记一下顺序存储结构,后面我会加上链式存储结构的. ...

  7. eclipse中将项目打包成jar的两种方法,及其问题与解决方法

    第一种:利用eclipse中自带的export功能 第一种方法分两种情况先来看第一种情况:没有引用外部jar的项目打包 步骤一:右键点击项目选择导出(export),选择java>jar文件(不 ...

  8. 前端备忘录--JQuery选择器

    基本选择器 基本选择器是最常用的选择器,也是最简单的选择器. $("#test") //选取id为test的元素 $(".test") //选取class为te ...

  9. Secret 的使用场景 - 每天5分钟玩转 Docker 容器技术(109)

    我们可以用 secret 管理任何敏感数据.这些敏感数据是容器在运行时需要的,同时我们不又想将这些数据保存到镜像中. secret 可用于管理: 用户名和密码. TLS 证书. SSH 秘钥. 其他小 ...

  10. 使用AOP实现缓存注解

    为何重造轮子 半年前写了一个注解驱动的缓存,最近提交到了github.缓存大量的被使用在应用中的多个地方,简单的使用方式就是代码先查询缓存中是否存在数据,如果不存在或者缓存过期再查询数据库,并将查询的 ...