一道關於call和this的JS面試題

一個有情懷的程序員......

2017年始，希望成為一個更好的自己，想自己所想，愛自己所愛

----------------------------------------------------------------------------------------------------------------------

筆試題：

<script type="text/javascript">
    var scope = "global";
    function log(){
        var args = Array.prototype.join.call(arguments, ", ");
        console.log(this.scope + ':' + args);
    }
    var dog = {
        scope:'dog',
        yelp: function(){
            var scope = 'dog.yelp';
            log('wow');
        }
    }        
    dog.yelp();        
    dog.yelp.call(dog);        
    log.call(dog, 'created');
</script>

考察知識點：

　　prototype、join()、call()、arguments 以及 this

 

　　prototype:對象的原型對象。有點抽象，可以理解為造物主的模板。

　　join():將數組（或一個類數組對象）的所有元素連接到一個字符串中。連接符為括號內的參數。eg:join(", ")

　　call():使用一個指定的this值和若干個指定的參數值的前提下調用某個函數或方法.

　　arguments:arguments對象是所有函數中可用的局部變量。你可以使用arguments對象在函數中引用函數的參數。　　

 

理解點一: call() 、join()  可以參考call()、apply()、bind() 詳解

function log(){
    /*
     * 將類對象數組arguments以“, ”分割開，並連接成字符串賦值給args      * 
     * */
    var args = Array.prototype.join.call(arguments, ", ");
    console.log(this.scope + ':' + args);
}

理解點二：this指向的問題

內容比較多，單獨整理了一篇博客 對JavaScript中this的理解

 

開始做題：

dog.yelp();  // global:wow

var scope = "global";
var dog = {
    scope:'dog',
    yelp: function(){
        var scope = 'dog.yelp';
        // 內部函數，this指向window 
        (function log(){
            var args = Array.prototype.join.call(arguments, ", ");
            console.log(this.scope + ':' + args);
        })('wow');
    }
}  

dog.yelp(); 

 

dog.yelp.call(dog);  // global:wow

var scope = "global";
var dog = {
    scope:'dog',
    yelp: function(){
        var scope = 'dog.yelp';
        // 第二句利用call把yelp執行環境中的this指向了dog,但其實yelp中的this本來就指向dog,所以本質上第二句和第一句是一樣的
        (function log(){
            var args = Array.prototype.join.call(arguments, ", ");
            console.log(this.scope + ':' + args);
        })('wow');
    }
}        
      
dog.yelp.call(dog); 

 

log.call(dog, 'created');  // dog:created

第三句比較簡單，考察的是call() call()、apply()、bind() 詳解

log()函數體中

this.scope == dog.scope == 'dog'

args == 'created'