javascript prototype原型继承
2016-07-14 15:56
441 查看
A.prototype = new B();
理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。
1.如何继承
//动物functionAnimal(){
this.species = "动物";
}
//猫
functionCat(name, color){
this.name = name;
this.color = color;
}
2.方法一:构造函数绑定
将父对象的构造函数绑定在子对象上functionCat(name, color){
Animal.apply(this, arguments);//在当前对象中调用函数Annimal
//或Animal.apply(this,[name, color]);
//apply()方法的第二个参数为数组或arguments参数集合
//或Animal.call(this,
name, color);(推荐)
//call()方法的第二个及后面可以是任意多个参数
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); //动物
3.[b]方法二:prototype模式[/b]
[b] [/b]
//将Cat的prototype对象指向一个Animal的实例,相当于删除了prototype对象原先的值,再赋予新值
Cat.prototype = new Animal();
//任何prototype对象都有一个constructor属性其构造函数,即,
//没有上一行,Cat.prototype.constructor是指向Cat的;
//加了上一行,Cat.prototype.constructor指向Animal。
//下一行,是将constructor指回原对象构造函数。
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); //动物
4.方法三:直接继承prototype
由于Animal对象中,不变的属性都可以直接写入Animal.prototype。可以让Cat()跳过Animal(),直接继承Animal.prototypefunction Animal(){
}
Animal.prototype.species= "动物";
Cat.prototype =Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); //动物
//存在问题:红色一行,把Animal.prototype对象的constructor属性也改掉了
5.[b]方法四:利用空对象作为中介[/b]
var F = function(){};F.prototype =Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;
•F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。
[b]6.[b]方法五:拷贝继承[/b][/b]
把父对象的所有属性和方法,拷贝到子对象
function extend2(Child, Parent) {
var p =Parent.prototype;
var c =Child.prototype;
for (var i in p) {
c[i] = p[i];
}
c.uber = p;//为了方便在子类中知道它的父类,
uber是一个变量
}
7.方法六:非构造函数继承
•var Chinese = {nation:'中国'
};
•var Doctor ={
career:'医生'
}
•以上对象没有构造函数,如何让“医生”去继承“中国人”,也就是说,怎样才能生成一个“中国医生”的对象?
•json格式发明人DouglasCrockford提倡的object()函数:
function object(o) { //o为父类,传递进来
functionF() {}
F.prototype = o;
return new F();
}
•第一步先在父对象的基础上,生成子对象:
var Doctor = object(Chinese);
•再加上子对象本身的属性
Doctor.career = '医生';
8.[b]方法七:深拷贝[/b]
function deepCopy(p, c) {
varc = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i]
= (p[i].constructor === Array) ? [] : {};
deepCopy(p[i],
c[i]);
} else {
c[i]
= p[i];
}
}
return c;
}
例如:var
Doctor = deepCopy(Chinese);
相关文章推荐
- 何为语法树
- JS中的二叉树遍历
- js闭包
- headroom.js使用
- 深入理解javascript函数
- JavaScript强化教程——正则表达式回溯
- JavaScript强化教程——正则表达式回溯
- js为Array添加打乱元素顺序的函数shuffle()
- javascript时间戳和日期字符串相互转换
- JavaScript 数组
- 搞懂JavaScript的Function.prototype.bind[译]
- ---Jsp(一)简介
- 原生js下拉刷新
- JavaScript的==和===运算符
- JSP中post和get乱码解决方法
- es6新特性学习
- 完全弄懂js函数中的属性特点
- js数据类型+js作用域
- escape()、encodeURI()、encodeURIComponent()区别详解
- bzoj1822: [JSOI2010]Frozen Nova 冷冻波