javascript继承(一)
2016-06-21 09:24
260 查看
1. 原型链继承
(1) 原型链的继承方式
function dad(){
this.property = true;
}
dad.prototype.getDadValue = function(){
return this.property;
};
function son(){
this.subproperty = false;
}
//通过原型链继承
son.prototype = new dad();
var instance = new son();
alert(instance.getDadValue());
以上代码创建里连个类型:dad和son,每一个类型分别有一个属性和方法,他们的主要区别是son继承了dad,该继承是通过创建dad的实例,并将该实例赋值给son.prototye实现的。实现的本质是重写了原型对象。取而代之的是一个新类型的实例。
注意: 此时的instance的constructor指向dad,在继承的时候,son的constructor被重写了。
(2) 原型链继承的两个问题
a. 引用类型值的原型属性会所有实例所共享,而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性。
function dad(){
this.color = ['red','blue'];
}
function son(){
}
son.prototype = new dad();
var instance1 = new son();
instance1.color.push('black');
alert(instance1.color); // red,blue, black
var instance2 = new son();
alert(instance2.color); //red,blue,black
:我们通过dad创建了一个color属性,该属性包含一个数组(引用类型值)。dad的每个实例中都会有一个color属性。当son通过原型链继承了dad后,son.prototype
就变成了dad的一个实例,因此son也拥有了自己的一个color属性(相当于创建了一个son.prototype.color)。结果son的每个实
数传递函数。
2. 构造函数继承
(1) 解决上面的引用类型的问题
function dad(){
this.color = ['red','blue'];
}
function son(){
dad.call(this)
}
var instance1 = new son();
instance1.color.push('black');
alert(instance1.color); // red,blue, black
var instance2 = new son();
alert(instance2.color); //red,blue,
通过使用call()方法或者apply也可以,实际上是在son实例的环境下调用了dad的构造函数,这样一来,就会在新son对象上执行dad函数中定义的所有对象的初始代码。结果son的每个实例中就会有自己的color的属性了。
(2)传递参数
function
person( name, age ){
this.name = name;
this.age = age;
this.alertName = function() {
alert(this.name);
};
this.alertAge = function(){
alert(this.age);
}
}
function son(name,age,sex){
person.call(this,name,age);
this.sex = '男';
this.alertSex = function(){
alert(this.sex);
}
}
var instance = new son('行者','24','男');
instance.alertName(); //行者
instance.alertAge(); //24
instance.alertSex(); //男
通过call()
方法son就继承了person类,person.call(this,name,age)的意思是使用person的构造函数(其实本质上就是函数)在this对象下执行那么son就有了person的所有属性和方法,son对象就能直接调用person的方法和属性了。
(3) 借用构造函数的问题
如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题-----方法都在构造函数中定义,因此函数的复用就无从谈起,而且,在父类型的原型中定义的方法,对于子类型而言也是不可见的,结果所有类型都只能所使用构造函数模式,所以,构造函数继承也是很少单独使用的。
(1) 原型链的继承方式
function dad(){
this.property = true;
}
dad.prototype.getDadValue = function(){
return this.property;
};
function son(){
this.subproperty = false;
}
//通过原型链继承
son.prototype = new dad();
var instance = new son();
alert(instance.getDadValue());
以上代码创建里连个类型:dad和son,每一个类型分别有一个属性和方法,他们的主要区别是son继承了dad,该继承是通过创建dad的实例,并将该实例赋值给son.prototye实现的。实现的本质是重写了原型对象。取而代之的是一个新类型的实例。
注意: 此时的instance的constructor指向dad,在继承的时候,son的constructor被重写了。
(2) 原型链继承的两个问题
a. 引用类型值的原型属性会所有实例所共享,而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就顺理成章地变成了现在的原型属性。
function dad(){
this.color = ['red','blue'];
}
function son(){
}
son.prototype = new dad();
var instance1 = new son();
instance1.color.push('black');
alert(instance1.color); // red,blue, black
var instance2 = new son();
alert(instance2.color); //red,blue,black
:我们通过dad创建了一个color属性,该属性包含一个数组(引用类型值)。dad的每个实例中都会有一个color属性。当son通过原型链继承了dad后,son.prototype
就变成了dad的一个实例,因此son也拥有了自己的一个color属性(相当于创建了一个son.prototype.color)。结果son的每个实
数传递函数。
2. 构造函数继承
(1) 解决上面的引用类型的问题
function dad(){
this.color = ['red','blue'];
}
function son(){
dad.call(this)
}
var instance1 = new son();
instance1.color.push('black');
alert(instance1.color); // red,blue, black
var instance2 = new son();
alert(instance2.color); //red,blue,
通过使用call()方法或者apply也可以,实际上是在son实例的环境下调用了dad的构造函数,这样一来,就会在新son对象上执行dad函数中定义的所有对象的初始代码。结果son的每个实例中就会有自己的color的属性了。
(2)传递参数
function
person( name, age ){
this.name = name;
this.age = age;
this.alertName = function() {
alert(this.name);
};
this.alertAge = function(){
alert(this.age);
}
}
function son(name,age,sex){
person.call(this,name,age);
this.sex = '男';
this.alertSex = function(){
alert(this.sex);
}
}
var instance = new son('行者','24','男');
instance.alertName(); //行者
instance.alertAge(); //24
instance.alertSex(); //男
通过call()
方法son就继承了person类,person.call(this,name,age)的意思是使用person的构造函数(其实本质上就是函数)在this对象下执行那么son就有了person的所有属性和方法,son对象就能直接调用person的方法和属性了。
(3) 借用构造函数的问题
如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题-----方法都在构造函数中定义,因此函数的复用就无从谈起,而且,在父类型的原型中定义的方法,对于子类型而言也是不可见的,结果所有类型都只能所使用构造函数模式,所以,构造函数继承也是很少单独使用的。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享