一道关于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'