zoukankan      html  css  js  c++  java
  • 构造函数继承--call,apply

    构造函数继承的原理 : 通过改变this指向来实现继承(在子类中使用call或apply的方式调用父类  让父类中的this指向子类new出来的对象)

    构造继承的优点:
      1. 子类实例共享父类引用属性的问题
      2. 创建子类实例时,可以向父类传递参数
      3. 可以实现多继承(call或apply多个父类对象)
    构造继承缺点:
      1. 实例并不是父类的实例,只是子类的实例
      2. 只能继承父类的实例属性和方法,不能继承原型属性和方法
      3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

      语法格式:

        function  子类函数名(参数1,参数2){

          父类函数名.call(this,参数1,参数2);     //注: 实例继承

        }

        function  子类函数名(参数1,参数2){

          父类函数名.apply(this,arguments或者[参数1,参数2,参数3,......]);     //注: 实例继承

        }

    call和apply的特点:

      两个都只能继承实例不能继承原型,第一个参数的this都一样,指的是当前对象. call的第二个参数开始是参数列表,apply的第二个参数是数组或者arguments

      可以执行函数,可以带入参数,可以改变调用函数中this的指向,不能用于创建函数
     
    call方法的练习:
        function fn3(num){
            this.a = num;     //obj1.a = 10
            fn4(this);      //调用fn4将obj1对象传递到fn4
        }
        function fn4(obj){
            obj.b = 10;        //为obj1添加新的属性b和c
            obj.c = 20;
        }
        var obj1 = {};  //定义一个对象,此时该对象没有任何属性
        fn3.call(obj1,10);  //调用fn3函数,让该函数中的this指向obj1,并传递参数10
        console.log(obj1);  //{a:10,b:10,c:20}

    apply方法练习:

        function Father(tel,name,age){
            this.money = 99999999;
            this.name = name;
            this.age = age;
            this.tel = tel;
            this.dance = function(){
                console.log("会跳舞");
            }
        }
    
        function Son(tel,name,age){
            //在子类中使用call、或apply或bind调用父类的构造函数 并将父类中的this指向子类对象
            //Father.call(this,tel,name,age);
            //Father.apply(this,[tel,name,age]);
            Father.apply(this,arguments);    //在使用arguments的时候传递参数的顺序,和接收参数的顺序必须保持一致
        }
        var son = new Son("132xx","xm",13);
        var son1 = new Son("133xx","xh",18);
        console.log( son,son1 );
                  
  • 相关阅读:
    财务报表分析(张新民教授)-第六章 企业报表战略分析
    zend studio 10破解/汉化
    使用jQuery动态加载js脚本文件的方法
    手机端的META你有多了解?
    js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
    理解CSS Clip属性及用法
    js touch触屏原理分析
    解决xp共享的批处理文件
    jQuery Tools:Web开发必备的 jQuery UI 库
    使用CSS3线性渐变实现图片闪光划过效果
  • 原文地址:https://www.cnblogs.com/self-hard/p/10364433.html
Copyright © 2011-2022 走看看