JS中继承的那些方法

所谓继承?

继承就是子类继承父类的属性和方法,目的可以让子类的实例能够使用父类的属性和方法
类指的就是构造函数

 

1.原型链继承

基本思想:借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型;让一个引用类型继承另一个引用类型的属性和方法。

//创建父类和原型方法
function Cat(uname){
    this.uname =uname;
}
Cat.prototype.run=function(){
    console.log('跑跑跑!')
}

// 子类
function Sanhua(age){
    this.age =age;
}
//实现继承,把父类实例放到子类原型上
Sanhua.prototype = new Cat('三花')
// 原型链
// Sanhua.prototype.constructor = Sanhua 
Sanhua.prototype.run=function(){
    console.log('我是三花!')
}
//创建实例
let sanhua = new Sanhua('1')
console.log(b)

2.call继承(借用构造函数继承)

基本思想:在子类构造函数中把父类构造函数当作普通函数执行,并且通过call方法把父类构造函数中的this替换成子类的实例(this),这样相当于给子类实例上设置了私有的属性和方法。

//创建父类
function Cat(uname) {
    this.uname = uname;
    this.run = function(){
                console.log('跑跑跑')
            }
}

// 子类
function Sanhua(age,uname) {
    this.age = age;
    Cat.call(this,uname)
}
//创建实例
let sanhua = new Sanhua('1','三花')
console.log(sanhua)

3.组合继承

基本思想:用使用原型链的方式来实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

        //创建父类
        function Cat(uname) {
            this.uname = uname;
            this.run = function () {
                console.log('跑跑跑')
            }
        }
        Cat.prototype.wait = function () {
            console.log('等待!')
        }
        // 子类
        function Sanhua(age, uname) {
            this.age = age;
            Cat.call(this, uname)//对象冒充 只能继承构造函数的属性和方法
        }
        Sanhua.prototype = new Cat() //原型链
        //创建实例
        let sanhua = new Sanhua('1', '三花')
        console.log(sanhua)
        sanhua.wait()

4.原型式继承

基本思想:是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

function obj(o){   //传递一个字面量函数
            function F(){}  //创建一个构造函数
            F.prototype = o;  //把字面量函数赋值给构造函数的原型
            return new F()  //最后返回出实例化的构造函数
        }

        let box = {
            name:'小明',
            age:20,
            family:['爸爸','妈妈']
        }

        let newBox = obj(box)
        console.log(newBox.name)   // 小明
        newBox.family.push('妹妹')
        console.log(newBox.family)  //['爸爸','妈妈','妹妹']

5.寄生式继承

基本思想:寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该 函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象。

function obj(o) {   //传递一个字面量函数
            function F() {}  //创建一个构造函数
            F.prototype = o;  //把字面量函数赋值给构造函数的原型
            return new F()  //最后返回出实例化的构造函数
        }

        function create(o) {
            let clone = obj(o);  //通过调用函数创建一个对象
            clone.sayHi = function () {  //以某种方式来增强这个对象
                console.log(123)
            }
            return clone; //返回这个对象
        }
        let person = {
            name: '小明',
            family: ['爸爸', '妈妈']
        };
        let another = create(person)
        another.sayHi();  //  123

6.ES6中的Class类继承

1.ES6中新增了一个定义类的方法这样就不用我们手动的创建构造函数了
2.ES6 class继承通过extends来实现继承
3.语法:class 子类 extends父类
4.在constructor中要使用super()
特点:

  • 1.父类私有的属性和方法会变成子类私有的属性和方法
  • 2.父类公有属性和方法会变成子类公有的属性和方法
    class Dad {
                constructor(uname){
                    this.uname = uname
                }
                say = function(){
                    console.log('叫爸爸!')
                }
            }
            // 子类继承父类
            class Son extends Dad{
                constructor(uname,age){
                    super(uname)
                    this.age = age
                }
            }
    
            let xiaoming = new Son('小明','18')
            console.log(xiaoming)  //uname: '小明', age: '18', say: ƒ
            xiaoming.say() // 叫爸爸!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript ,实现继承方法有以下几种方式: 1. 原型继承:利用原型链实现继承。通过将父类的实例作为子类的原型,子类就可以访问到父类的属性和方法。例如: ```javascript function Parent() { this.name = 'parent'; } Parent.prototype.sayName = function() { console.log(this.name); } function Child() {} Child.prototype = new Parent(); var child = new Child(); child.sayName(); // 输出:parent ``` 2. 构造函数继承:利用 call 或 apply 方法将父类构造函数的作用域赋给子类。这种方式可以实现多继承。例如: ```javascript function Parent(name) { this.name = name; } function Child(name) { Parent.call(this, name); } var child = new Child('child'); console.log(child.name); // 输出:child ``` 3. 组合继承:结合原型继承和构造函数继承,既可以继承父类的属性和方法,又可以实现子类实例的独立。例如: ```javascript function Parent(name) { this.name = name; } Parent.prototype.sayName = function() { console.log(this.name); } function Child(name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child = new Child('child', 18); console.log(child.name); // 输出:child console.log(child.age); // 输出:18 child.sayName(); // 输出:child ``` 4. 原型式继承:利用 Object.create() 方法创建一个新对象,以某个对象为原型,然后再对新对象进行修改。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; var child = Object.create(parent, { name: { value: 'child' } }); child.sayName(); // 输出:child ``` 5. 寄生式继承:与原型式继承类似,但是在增强对象的方法时使用了一个函数封装。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; function createChild(original) { var child = Object.create(original); child.sayName = function() { console.log('hello, ' + this.name); } return child; } var child = createChild(parent); child.sayName(); // 输出:hello, parent ``` 需要注意的是,在实现继承时应该注意避免出现属性和方法的重复定义,以及避免在父类的原型上修改引用类型的属性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值