javascript学习笔记(十) js对象 继承_基础知识
程序员文章站
2022-06-08 14:29:56
...
1.原型链
//很少单独使用
View Code
//定义 SuperClass类,有一个属性property和一个方法getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
//定义SubClass类,有一个属性subproperty和后来添加的一个方法getSubValue
function SubClass() {
this.subproperty = false;
}
//SubClass类继承SuperClass类
SubClass.prototype = new SuperClass();
//SubClass类添加一个方法getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//创建SubClass类的实例
var instance = new SubClass();
alert(instance.getSuperValue());
2. 确定原型与实例的关系
第一种方式用 instanceof 操作符,用来测试实例和原型链中出现过的构造函数
alert(instance instanceof Object); //true ,instance是Object的实例吗?
alert(instance instanceof SuperClass); //true ,instance是SuperClass的实例吗?
alert(instance instanceof SubClass); //true,instance是SubClass的实例吗?
第二种方式用 isPrototypeOf()方法,测试原型链中出现的原型
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true
3. 用原型链继承定义方法时的注意点
定义方法是的顺序:
View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
function SubClass() {
this.subproperty = false;
}
//SubClass继承SuperClass
SubClass.prototype = new SuperClass(); //这个要先写,新添加的方法和重写超类的方法要写在后面,否则重写的超类方法将永远无法调用
//添加新方法
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//重写超类的方法
SubClass.prototype.getSuperValue = function() {
return false;
}
var instance = new SubClass();
alert(instance.getSuperValue()); //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法,而屏蔽了SuperClass的getSuperValue()方法,
//使用SuperClass的方法会调用SuperClass的getSuperValue()方法
原型链继承的缺点:1)共享超类中的属性,2)在创建子类时不能向超类的构造函数传递参数。所有很少单独使用原型链
4.借用构造函数
//很少单独使用
优点:可以向超类传递参数 。缺点:函数无法复用,所有类都要使用构造函数模式
View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); //继承了SuperClass,同时向SuperClass传递了参数
this.age = 29; //实例属性
}
var instance = new SubClass();
alert(instance.name); //RuiLiang
alert(instance.age); //29
6.组合继承
//最常用的继承模式
View Code
//创建SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}
////创建SubClass
function SubClass(name,age) {
SuperClass.call(this,name); //继承属性
this.age = age; //自己的属性
}
SubClass.prototype = new SuperClass(); //继承方法
SubClass.prototype.sayAge = function() { //SubClass添加新方法
alert(this.age);
};
//使用
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30
var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"RuiLiang"
instance2.sayAge(); //30
7.其它继承模式
原型式继承、寄生式继承、寄生组合式继承
//很少单独使用
复制代码 代码如下:
View Code
//定义 SuperClass类,有一个属性property和一个方法getSuperValue
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
//定义SubClass类,有一个属性subproperty和后来添加的一个方法getSubValue
function SubClass() {
this.subproperty = false;
}
//SubClass类继承SuperClass类
SubClass.prototype = new SuperClass();
//SubClass类添加一个方法getSubValue
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//创建SubClass类的实例
var instance = new SubClass();
alert(instance.getSuperValue());
2. 确定原型与实例的关系
第一种方式用 instanceof 操作符,用来测试实例和原型链中出现过的构造函数
复制代码 代码如下:
alert(instance instanceof Object); //true ,instance是Object的实例吗?
alert(instance instanceof SuperClass); //true ,instance是SuperClass的实例吗?
alert(instance instanceof SubClass); //true,instance是SubClass的实例吗?
第二种方式用 isPrototypeOf()方法,测试原型链中出现的原型
复制代码 代码如下:
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperClass.prototype.isPrototypeOf(instance)); //true
alert(SubClass.prototype.isPrototypeOf(instance)); //true
3. 用原型链继承定义方法时的注意点
定义方法是的顺序:
复制代码 代码如下:
View Code
function SuperClass() {
this.property = true;
}
SuperClass.prototype.getSuperValue = function() {
return this.property;
}
function SubClass() {
this.subproperty = false;
}
//SubClass继承SuperClass
SubClass.prototype = new SuperClass(); //这个要先写,新添加的方法和重写超类的方法要写在后面,否则重写的超类方法将永远无法调用
//添加新方法
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}
//重写超类的方法
SubClass.prototype.getSuperValue = function() {
return false;
}
var instance = new SubClass();
alert(instance.getSuperValue()); //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法,而屏蔽了SuperClass的getSuperValue()方法,
//使用SuperClass的方法会调用SuperClass的getSuperValue()方法
原型链继承的缺点:1)共享超类中的属性,2)在创建子类时不能向超类的构造函数传递参数。所有很少单独使用原型链
4.借用构造函数
//很少单独使用
优点:可以向超类传递参数 。缺点:函数无法复用,所有类都要使用构造函数模式
复制代码 代码如下:
View Code
function SuperClass(name) {
this.name = name;
}
function SubClass(){
SuperClass.call(this,"RuiLiang"); //继承了SuperClass,同时向SuperClass传递了参数
this.age = 29; //实例属性
}
var instance = new SubClass();
alert(instance.name); //RuiLiang
alert(instance.age); //29
6.组合继承
//最常用的继承模式
复制代码 代码如下:
View Code
//创建SuperClass
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}
////创建SubClass
function SubClass(name,age) {
SuperClass.call(this,name); //继承属性
this.age = age; //自己的属性
}
SubClass.prototype = new SuperClass(); //继承方法
SubClass.prototype.sayAge = function() { //SubClass添加新方法
alert(this.age);
};
//使用
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30
var instance2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"RuiLiang"
instance2.sayAge(); //30
7.其它继承模式
原型式继承、寄生式继承、寄生组合式继承
上一篇: 如何在百度贴吧里加入带链接的广告图片
下一篇: java 内存溢出
推荐阅读
-
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式_基础知识
-
javascript 学习笔记(八)javascript对象_基础知识
-
javascript学习笔记(十) js对象 继承_基础知识
-
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)_基础知识
-
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)_基础知识
-
Javascript学习笔记之 对象篇(四) : for in 循环_基础知识
-
javascript学习笔记(九) js对象 设计模式_基础知识
-
JavaScript高级程序设计(第3版)学习笔记10 再访js对象_基础知识
-
Javascript学习笔记9 prototype封装继承_基础知识
-
javascript学习笔记(八) js内置对象_基础知识