prototype为对象添加属性和方法
可以通过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为对象添加属性和方法的更多相关文章
- javascript面向对象(给对象添加属性和方法的方式)
1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法 var g ...
- 继承:《原型和原型链(prototype 属性使您有能力向对象添加属性和方法。)》
二. 原型对象 在JavaScript 中,每当定义一个对象(函数)时候,对象中都会包含一些预定义的属性.其中函数对象的一个属性就是原型对象 prototype.注:普通对象没有prototype ...
- 275 原型与原型链:显式原型prototype ,隐式原型__proto__,隐式原型链,原型链_属性问题,给原型对象添加属性/方法
1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...
- JS内置对象的原型不能重定义?只能动态添加属性或方法?
昨天马上就快下班了,坐在我对面的同事突然问我一个问题,我说“爱过”,哈哈,开个玩笑.情况是这样的,他发现JS的内置对象的原型好像不能通过字面量对象的形式进行覆盖, 只能动态的为内置对象的原型添加属性或 ...
- 【JavaScript】浅析JavaScript对象如何添加属性和方法
向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...
- js学习(一)-动态添加、修改、删除对象的属性和方法
//-----------------------js代码--------------------------- function class1(){ } //-------------------- ...
- 转: javascript动态添加、修改、删除对象的属性和方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
- javascript动态添加、修改、删除对象的属性与方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
- Python笔记_第三篇_面向对象_8.对象属性和类属性及其动态添加属性和方法
1. 对象属性和类属性. 我们之前接触到,在类中,我们一般都是通过构造函数的方式去写一些类的相关属性.在第一次介绍类的时候我们把一些属性写到构造函数外面并没有用到构造函数,其实当时在写的时候,就是在给 ...
随机推荐
- vue+echarts 动态绘制图表以及异步加载数据
前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s (我这里用了淘宝镜像,不知道同学自 ...
- thinkphp整合系列之极验滑动验证码
对于建站的筒子们来说:垃圾广告真是让人深恶痛绝:为了清净:搞个难以识别的验证码吧:又被用户各种吐槽:直到后来出现了极验这个滑动的验证码:这真是一个体验好安全高的方案:官网:http://www.gee ...
- layui使用心得
表单控件样式没生效, 因为没引入form. layui.use('form', function(){ var form = layui.form; }); radio改变事件没生效, 需要手动fil ...
- Cesium中Clock控件及时间序列瓦片动态加载
前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
- java 邮件发送的公共方法
protected static String host = "true"; protected static String auth = "smtp.163.com&q ...
- 大数据学习系列之五 ----- Hive整合HBase图文详解
引言 在上一篇 大数据学习系列之四 ----- Hadoop+Hive环境搭建图文详解(单机) 和之前的大数据学习系列之二 ----- HBase环境搭建(单机) 中成功搭建了Hive和HBase的环 ...
- JDBC的使用
JDBC详解系列(一)之流程 ---[来自我的CSDN博客](http://blog.csdn.net/weixin_37139197/article/details/78838091)--- 使 ...
- [睡前灵感and发散思维]由一个简单的数组比较问题而想到的
前言 据说,一只优秀的程序猿往往会有这样的经历,白天遇到一个绞尽脑汁也无法解决的问题,晚上睡了后,半夜在梦中会灵感涌现,立马起床,打开电脑,一气呵成.第二天如果不看注释,完全不知道自己找到了如此巧妙地 ...
- C++学习笔记24,方法重写与方法隐藏
该博文仅用于交流学习.请慎用于不论什么商业用途.本博主保留对该博文的一切权利. 博主博客:http://blog.csdn.net/qq844352155 转载请注明出处: 方法重写.是指在子类中又一 ...
- It appears that the Web Project,“”,has no Web Root directory setup
1 错误描写叙述 2 错误原因 因为项目是用eclipse新建的,web的根文件夹文件夹是WebContent.而MyEclipse新建的项目的Web根文件夹是WebRoot.直接将eclipse项目 ...