一、面向对象的继承
1、解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能
2、如何添加继承—拷贝继承
属性:call
方法: for in
/*
继承:子类不影响父类,子类可以继承父类的一些功能(代码复用)
属性的继承:调用父类的构造1函数 call
方法的继承:for in 拷贝继承
*/
//父类
function CreatePerson(name,sex){
this.name = name;
this.sex = sex;
}
CreatePerson.prototype.showName = function(){
alert(this.name)
}
var p1 = new CreatePerson('小明','男')
p1.showName() //小明//子类
function CreateStar(name,sex,job){
CreatePerson.call(this,name,sex);
this.job = job;
}
//拷贝继承
extend(CreateStar.prototype,CreatePerson.prototype)
var p2 = new CreateStar("周杰伦",'男','歌手');
p2.showName(); //周杰伦//面向对象的拷贝复制,防止影响父类对象的内容
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
然后按照继承的方式做了一个窗口拖拽的demo,你可以狠狠的点击这里,进行查看
二、继承的其他形式(用的不是很多)
1、类式继承 : 利用构造函数(类)继承的方式
/*js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的 * */
//父类
function Aaa(){
this.name = '小明';
}
Aaa.prototype.showName = function(){
alert(this.name)
}//子类
function Bbb(){}
//这句话就是类式继承
Bbb.prototype = new Aaa();
//修正指向问题
Bbb.prototype.constructor = Bbb;var b1 = new Bbb();
b1.showName(); //小明
但实际上上面的写法还是有点问题的,假如name是一个数组的时候,父类的属性会被修改,所以例子完善后如下
/*
1、js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的
2、要做属性和方法继承的时候,要分开继承
* */
//父类
function Aaa(){
this.name = [1,2,3];
}
Aaa.prototype.showName = function(){
alert(this.name)
}//子类
function Bbb(){
Aaa.call(this)
}//这个是构造函数,这个函数里面没有任何的属性与方法,避免属性继承
var F = function(){}
F.prototype = Aaa.prototype;
//所以在B接收原型的时候,只能接收方法,不能接收属性
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb;var b1 = new Bbb();
b1.name.push(4);var b2 = new Bbb();
alert(b2.name); //1,2,3
2、原型继承 : 借助原型来实现对象继承对象
var a = {
name : '小明'
}
var b = cloneObj(a);
b.name = "小红"alert(a.name); //小明
alert(b.name); //小红function cloneObj(obj){
//这种方式就叫做原型继承
var F = function(){};
F.prototype = obj;
return new F();
}
总结:
拷贝继承 : 通用型,有new或无new的时候都可以
类式继承: new构造函数
原型继承: 无new的对象