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);