浓缩解读《JavaScript设计模式与开发实践》②

2017-01-03 本文已影响313人梁同学de自言自语

this、call和apply

QQ图片20170103163230.jpg

2.1 this

JavaScript所有函数作用域内部都有一个this对象，它代表调用该函数的对象，具体的值则是由函数的执行环境来动态绑定。（简单理解为，谁调用就指向谁）

2.1.1 this的指向

除去with和eval的情况，this的指向大致可以分为以下4种情况：
- 函数作为对象的方法被调用；
- 函数作为普通函数被调用；
- 函数作为构造器被调用；
- Function.prototype.call或Function.prototype.apply被调用；
函数作为对象的方法被调用时，this指向该对象

var object = {
    str : "object str",
    print : function(){
        return this.str;
    }
};
console.log(object.print());

作为普通函数被调用时，this指向全局对象。如果在浏览器环境中，这个全局对象就是window对象。

var str = "global"; //全局变量str
var object = {
    //对象属性str
    str : "object str",
    print : function(){
        return this.str;
    }
};
//将对象方法赋值给全局函数
var fn = object.print;
console.log(fn());

Web前端中，我们熟悉的callback()函数，就经常会出现由于被当做普通函数调用，导致this指向被篡改的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- DOM节点的ID属性 -->
        <input id="btn_id" type="button" value="click" />
        <script type="text/javascript">
            //全局id
            var id = "global_id";
            document.getElementById('btn_id').onclick = function(){
                //以对象的方法执行,此时this指向DOM对象,输出"div_id"
                console.log(this.id);
                //声明一个回调函数
                var callback = function(){
                    console.log(this.id);
                }
                //dosomething之后
                //由于以普通函数的方式执行，所以输出"global_id"
                callback();
            };
        </script>
    </body>
</html>

上一章我们了解到什么是构造函数（或者说构造器），它和普通函数的区别只是会以大写字母开头，以new关键字来调用。而构造函数顾名思义，它的作用就是构造一个新对象，所以构造函数在执行后总会返回一个对象。所以，函数作为构造器被调用时，this指向的是这个返回的对象。

var Person = function(){
    this.str = "person str";
};
var person1 = new Person();
console.log(person1.str);    //输出“person str”

但值得注意的是，如果构造函数显式的return一个对象，那this指向的就是这个对象，而不是构造函数的执行代码块的局域变量。

var Person = function(){
    this.str = "person str";
    return {
        this.str = "new person str";
    }
};
var person1 = new Person();
console.log(person1.str);   //输出"new person str"

如果通过Function.prototype.call或Function.prototype.apply调用函数，则可以自定义this的指向。

var str = "global"; //全局变量str
var object1 = {
    str : "object1 str",
    print : function(){
        return this.str;
    }
};
var object2 = {
    str : "object2 str"
};
console.log(object1.print());   //输出"object1 str"
//可以理解成，通过object2对象来执行object1.print()方法。所以this指向的是object2对象，输出"object2 str"
console.log(object1.print.call(object2));

2.1.2 this丢失的情况

类似callback()函数的情况，我们举另外一个例子：document.getElementById()是大家都熟悉的原生JS方法，但方法名太长了，我想用以名字很短的函数来代替它，看看是否可行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- DOM节点的ID属性 -->
        <input id="btn_id" type="button" value="click" />
        <script type="text/javascript">
            /*
             * 问题示例 
             */
            //将getElementById赋值给getId方法
            var getId = doc'ument.getElementById;
            getId("btn_id");'
            //控制台报错"Uncaught TypeError: Illegal invocation"
            
            /*
             * 示例修改
             */
            //这是因为getElementById()方法内部实现中用到了this了，本来默认this是指向ducument对象的，当做普通函数执行后，this指向就指向了window对象
            //修改:用getId方法包装一层，返回的是通过ducumet对象执行的getElementById()方法的结果
            var getId = function(id){
                return document.getElementById(id);
            };
            getId('btn_id');
        </script>
    </body>
</html>

2.2 call、apply和bind

ECMAScript3给Function原型定义了Function.prototype.call或Function.prototype.apply两个方法，不管是函数式风格的代码编写，还是JavaScript的设计模式，这两个方法都应用非常广泛，熟练运用call()和apply()方法也是真正称为JavaScript程序员的重要一步。

2.2.1 call

call()方法是传入 指定this值 和参数执行某个函数。

//全局变量
var name = "window";
//公共的执行函数
function print(label){
    console.log(label + ":" + this.name);
}
//对象1
var person1 = {
    name : "Grubby"
};
//对象2
var person2 = {
    name : "Moon"
};print.call(this,"global");    //输出"global:window"
print.call(person1,"person1");  //输出"person1:Grubby"
print.call(person2,"person2");  //输出"person2:Moon"

2.2.2 apply

apply()的工作方式和call()完全一样，唯一的区别是需要被传入函数的参数，apply()是通过arguments类似数组的对象传入参数。

print.apply(this,["global"]);   //输出"global:window"
print.apply(person1,["person1"]);   //输出"person1:Grubby"
print.apply(person2,["person2"])    //输出"person2:Moon"
//两者的区别
/*
fn.call(obj, arg1, arg2, arg3...);
fn.apply(obj, [arg1, arg2, arg3...]);
*/

在执行函数时，JavaScript解析器实际上并不会计较形参和实参在数量、类型以及顺序上的区别，（这也导致JavaScript没有Java的方法重写）JavaScript的参数在内部就是一个arguments对象来表示。经过对比可以发现，其实call()是包装apply()的语法糖，不用刻意传入一个数组，不管多少个参数，只管在后面追加就是了。
call()和apply()一样，如果传入this值是null，那么将指向默认的宿主对象，如果在浏览器中指向是window。

2.2.3 bind

bind()是ECMAScript5新加的方法，和前两个方法相比， call()和apply()是改变了this的值，然后执行函数，而bind()是改变了this值后，返回这个函数。

//不出所料，输出"person1:Grubby"
var printForPerson1 = print.bind(person1);
printForPerson1("person1");
//输出"person2:Moon"，绑定的时候传参和执行的时候传参都可以
var printForPerson2 = print.bind(person2,"person2");
printForPerson2();
//printForPerson1()中的this依据被绑定，纵使以person2.print()方法的方式执行，依然输出person1的name
person2.print = printForPerson1;
person2.print("person2");

2.2.3 用途

通过借用其他对象的方法，实现类似继承的效果

//Person构造函数，可以指定name
var Person = function(name){
    this.name = name;
};
//Student构造函数
var Student = function(){
    Person.apply(this,arguments);   //借用Person的构造函数
};
//为学生添加一个说出自己名字的方法
Student.prototype.sayName = function(){
    return this.name;
};
//实例化一个William学生
var student1 = new Student("William");
//虽然学生本身没有name属性，但是最终输出 "William"
console.log(student1.sayName());

利用call和apply求一个数组的最大或者最小值

var arr = [45,88,634,22,436,879];
var maxNum = Math.max.apply(Math, arr);
console.log(maxNum);
var minNum = Math.min.call(Math,45,88,634,22,436,879);
console.log(minNum);

利用call和apply合并数组

var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1, arr2);
console.log(arr1);
//输出: [1, 2, 3, 4, 5, 6]

浓缩解读《JavaScript设计模式与开发实践》②

this、call和apply

2.1 this

2.1.1 this的指向

2.1.2 this丢失的情况

2.2 call、apply和bind

2.2.1 call

2.2.2 apply

2.2.3 bind

2.2.3 用途

猜你喜欢

热点阅读