JavaScript继承方式(ES5)

1.原型链继承
        描述:子类原型指向父类实例
        语法:子类( 构造函数 ).prototype = new 父类( 构造函数 );
        说明:
                1) 该方法会将引用类型的私有属性变为公有属性
                2)该方法无法对父类传参
        例子:

function Father(){//创建父类构造函数
    this.name = "hello Function!";//创建父类构造函数的对象
}
Fn.prototype.getName = function(){//为父类构造函数创建原型对象
    return this.name;
}
function Son(){}//创建子类构造函数
Son.prototype = new Father();//子类原型指向父类原型
var _son = new Son();
console.log(_son.name);//打印"hello Function!"
console.log(_son.getName());//打印"hello Function!"

2.构造函数继承
        描述:通过在子类中执行父类的构造函数
        语法:子类构造函数{ 父类.call(  this,父类实参1、父类实参1、...  ) }
        说明:构造函数继承不能继承到父类的原型
        例子:

function Father(_name){//创建一个父类构造函数
    this.name = _name;//创建父类对象
}
Father.prototype.getName = function(){//创建父类原型对象
    return this.name;
}
function Son(){//创建子类构造函数
    Father.call(this, "Hello Function!");//将父类构造函数在父类中执行:使用call()函数
}
var $name = new Son();
console.log($name.name);//打印"Hello Function!"
console.log($name.getName());//报错:在$name实例中未找到getName 

3.组合继承
        描述:同时使用【原型链继承】和【构造函数继承】
        语法:将【原型链继承】语法和【构造函数继承】语法结合使用
        说明:子类实例化对象时会执行两次构造函数
        例子:

function Father(_name){//创建父类构造函数
    this.name = _name;
}
Father.prototype.getName = funciton(){//给父类创建一个原型对象
    return this.name;
}
function Son(){//创建一个子类构造函数
    Father.call(this,"hello function!");//构造函数继承:使用call()函数
}
Son.prototype = new Father();//原型链继承
var $name = new Son();//实例化子类对象
console.log($name.name);//打印"hello function!"
console.log($name.getName());//打印"hello function!";

4.寄生式继承
        描述:函数内部创建以某种形式来增强对象,最后返回对象
        语法:
                构造函数{
                         var 对象名 = Object.create(形参)
                        父类形参.函数名 = function(){
                                console.log("hello Function!");
                        }
                        return 对象名
                }
        说明:类似构造函数,会导致函数难以被重用
        例子:

function Fn(_obj){//创建一个父类构造函数
     var obj = Object.create(_obj);//给父类创建一个对象
     obj.Fn2 = function(){//增强父类的对象
         console.log('hello Function!');
     }
     return obj;//返回增强对象;
}
var arr = {
    name:"Function",
    age:10
}
var _fn = Fn(arr);
console.log(_fn.name);
console.log(_fn.age);
console.log(_fn.Fn2());

5.寄生式组合继承
        描述:在组合继承的前提下,
                   将原型链继承的【子类原型指向父类实例】修改为【子类原型指向父类原型】
        语法:语法跟组合继承相似
                   将原型链继承的【子类原型指向父类实例】修改为【子类原型指向父类原型】
        说明:子类的操作会影响父类的操作
        例子:

function Father(_name){//创建父类构造函数
    this.name = _name;
}
Father.prototype.getName = funciton(){//给父类创建一个原型对象
    return this.name;
}
function Son(){//创建一个子类构造函数
    Father.call(this,"hello function!");//构造函数继承:使用call()函数
}
Son.prototype = Father.prototype;//原型链继承
var $name = new Son();//实例化子类对象
console.log($name.name);//打印"hello function!"
console.log($name.getName());//打印"hello function!";

----------------------------------------------------------------------------------
ps:以上便是本人个人对JS继承的理解,有不足的地方欢迎一起讨论 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值