JS函数原型链上的call() 方法与apply()方法

JS函数原型链上的call() 方法与apply()方法

call()方法

• 语法结构

  • fun.call(thisArg, arg1, arg2, ...)
  • 在fun函数运行时指定的this值，既代替Function类里this对象
  • 返回值是调用方法的返回值，若该方法没有返回值，则返回undefined
  • 可以通过call()来实现继承，写一个方法然后让另一个对象继承它，而不是在新对象中重新写一下这个方法
  • call()方法存在于在Function.prototype上，因此每个函数都可以通过原型链继承下来。

• 作用

  • 1、使用call() 方法继承函数的属性和方法
  • 2、使用call() 方法调用匿名函数
  • 3、使用call() 方法调用函数并且指定上下文的this

    // 1. 使用 call() 继承方法和属性   
    function Person() {
        this.name = 'person';
        this.age = 24;
        this.print = function(){
            console.log('hello call!');
        }
    }

    function Son(){
        // 使 son 继承 Person 的方法和属性
        Person.call(this);
        this.study = 'study';
        this.play = function(){
            console.log('son play!');
        }
    }

    var son = new Son();
    console.log(son);
    console.log(son.age);   // 24
    son.print();            //hello call!
   

    // 2. 使用call() 方法调用匿名函数
    function Person() {
        this.name = 'person';
        this.age = 24;
        this.print = function(){
            console.log('hello call!');
        }
    }

    (function(){
        this.print();
    }).call(new Person());

    // 3. 使用call() 方法调用函数并且指定上下文的this
    function print() {
        var message = [this.person, 'is an awesome', this.role].join(' ');
        console.log(message);
    }
    var desc = {
        person:'Douglas Crockford',
        role:'Javascript Developer'
    }
    print.call(desc);

• 面试题
  • 使用getName方法打印出1,2,3

    var name = "1";
    var obj = {
        name:2,
        prop: {
            name:3,
            getName: function() {
                return this.name;
            }
        }
    }
    console.info(obj.prop.getName.call(this));  //1
    console.info(obj.prop.getName.call(obj));   //2
    console.info(obj.prop.getName());           //3 

apply()方法

• 语法结构

  • fun.call(thisArg, args)
  • 在fun函数运行时指定的this值，既代替Function类里this对象
  • args是数组，它将作为参数传给Function（args-->arguments）
  • 返回值是调用方法的返回值，若该方法没有返回值，则返回undefined
  • 可以通过apply()来实现继承，写一个方法然后让另一个对象继承它，而不是在新对象中重新写一下这个方法
  • apply()方法存在于在Function.prototype上，因此每个函数都可以通过原型链继承下来。

• 作用

  • 1、使用apply() 方法继承函数的属性和方法
  • 2、使用apply() 方法调用匿名函数
  • 3、使用apply() 方法调用函数并且指定上下文的this
  • 4、使用apply() 方法可以将数组列表转换为参数列表

    // 使用apply() 方法继承函数的属性和方法
    function Person(name,age) { 
        this.name=name;
        this.age=age;  
    }  
      
    function Student(name,age,grade)  {
        Person.apply(this,arguments);  
        this.grade=grade;  
    }  
    var student=new Student("张三",21,"一年级");  
    console.log(student);  

    // 使用apply() 方法调用匿名函数
    function Person() {
        this.name = 'person';
        this.age = 24;
        this.print = function(){
            console.log('hello call!');
        }
    }

    (function(){
        this.print();
    }).apply(new Person());

    // 使用apply() 方法调用函数并且指定上下文的this
    function print() {
        var message = [this.person, 'is an awesome', this.role].join(' ');
        console.log(message);
    }
    var desc = {
        person:'Douglas Crockford',
        role:'Javascript Developer'
    }
    print.apply(desc);

    // 使用apply() 方法可以将数组列表转换为参数列表
    var arr = [2,6,3,6,4];
    console.log(Math.max.apply(null,arr));
    console.log(Math.min.apply(null,arr));

    var arr1=new Array("1","2","3"); 
    var arr2=new Array("4","5","6"); 
    Array.prototype.push.apply(arr1,arr2);