面向对象-构造函数的继承

构造函数的继承: 又叫类的继承
继承: 通过某种方法让一个对象,可以访问并使用到另一个对象中的内容,这种方法叫做继承。
作用: 节省了构造函数中大量重发声明的属性和方法,提高开发效率节省内存
方法: call和apply方法达成了构造函数的继承作用
优点: 简约易使用;
缺点: 可以继承构造函数中的内容和方法,无法继承原型中的内容和方法

        function fn(){
            // this.haha = function(){
            //     console.log(this)
            // }
            console.log(this);//指向window全局
        }
        // window.fn();
        
        function Animal(name,sex){ 
            this.name = name;
            this.sex = sex;
            this.jiao = function(){
                fn.call(this)
                console.log(this)  //指向构造函数 
            }
        }

直接给原型赋值一个对象,可以简化批量赋值(操作),但是等于重构原型,重构原型时,需要手动创建constructor,否则原型链会断裂。

        Animal.prototype ={
            constructor:Animal,
            ll :"lala",
            fun:function(){
                console.log('我是原型中的方法')
            }
        }

        let obj = new Animal("猴子","公鸡") //obj里面的this也是指向构造函数
        obj.jiao();       
        fn();

call : 对象冒充 也叫对象借用 改变this 指向 call全局的谁都能调用

        fn.call(obj,"大象","公")  // 相当于把整个Animal放fn 函数里
        function Tiger(name,age,sex,hobby){
            // this.name = name;           
            // this.sex = sex;
            // this.jiao = function(){
            //     console.log(this)
            // }
           //上面三个已经在其他构造函数写过了 可以不用写 借过来用
            Animal.call(this,name,sex);

            this.age = age;  //只写 没用有 的属性
            this.hoppy = hobby;            
        }

        function Person(name,age,sex,hobby){ //还可以往上借  需要借什么 传什么参数
            Tiger.call(this.name) //          以this 开头 需要借什么 传什么参数
        }
        let tiger = new Tiger("老虎","18","公","吃水果");
        console.log(tiger.name)

**apply:**作用和call一致,都是借用对象
区别: call接受参数时,数量根据被借用需要 的参数而定
apply:只有两个参数 1.借用者 2.数组(这里存放着所有参数 方便管理)

        function Person2(name,sex,age,hoppy){
            let arr = [name,age,sex,hoppy]
            Tiger.apply(this,arr)
        }

        let per = new Person2("小四","18","待定","打篮球")
        per.jiao(); //构造函数  继承只可以(借用) 构造函数中的内容
        // per.fun() ; 无法继承(借用) 原型中的内容
        console.log(per);
发布了96 篇原创文章 · 获赞 26 · 访问量 7274

猜你喜欢

转载自blog.csdn.net/weixin_46146313/article/details/104207523
今日推荐