this

es5中this

 

this的概念

 

this 只有在函数里才有； 

this是函数的特有的默认值；

this在函数执行的时候才产生；

this是一个对象，也称指向一个对象，函数执行的环境不同，this这个对象是不一样的。

 

 

~~~~~~this是一个神奇的对象

 

 

 

this常见的指向对象

 

// 对象，包括普通定义的对象、DOM对象、实例化对象、函数也是对象

 

函数执行的时候，this指向调用函数环境的对象。

判断this指向的对象，先看函数的所在的执行环境。

 

 

1.全局作用域下的函数中的this指向window对象。

 

 

 

2.构造函数，构造函数中的this指向当前实例化对象

 

 

3.匿名函数的this指向

 

自执行的匿名函数，作为参数的回调函数，this指向顶层对象

 

 

 

 

回调函数中，this指向的是顶层对象。 

 

 

如果把回调函数设置成有名函数，大部分情况下都需要指定this的指向。

 

 

改变this指向

 

call,play,bind 3个方法相同点都能改变this的指向

 

不同点

 

传参的形式不同

call的参数是用逗号隔开， fn.call(obj, arg1,arg2)

 

play的参数是一个数组    fn.call(obj, [arg1,arg2])

 

bind的参数也是一个数组    fn.call(obj, [arg1,arg2])

 

call和play都是自执行，bind需要触发执行。这也是bind与play的区别。

 

 

 

bind触发执行，ie有兼容问题

 

在函数被调用的时候改变this的指向，使用bind, 函数在执行的时候改变。

 

 

常用到的需要改变this指向

 

1.改变this指向，把类数组转化为数组

    

 Array.Prototype.slice.call(arg) //arg指的的是类数组  

 

  获取到DOM是类数组，转换为数组

function list() {

   return Array.prototype.slice.call(arguments);    //函数的参数argument也是一个类数组,转化为数组

}

 

var list1 = list(1, 2, 3); // [1, 2, 3]

 

 

 

2.函数在被动调用时候改变this指向

 

利用bind，改变当函数被动掉用的时候改变this指向； call和apply改变this指向时是立即执行的。

 

this.x = 9; // 在浏览器中，this指向全局的 "window" 对象

var module = {

x: 81,

getX: function() { return this.x; }

};

 

module.getX(); // 81

 

var retrieveX = module.getX;

retrieveX(); // 返回9 - 因为函数是在全局作用域中调用的

// 创建一个新函数，把 'this' 绑定到 module 对象

var boundGetX = retrieveX.bind(module);

boundGetX(); // 81

 

这种情况下使用call或者apply是会报错的。

 

 

3.函数被调用时传参

 

bind()的另一个最简单的用法是使一个函数拥有预设的初始参数

 

 

function addArguments(arg1, arg2) {

return arg1 + arg2

}

var result1 = addArguments(1, 2); // 3

 

// 创建一个函数，它拥有预设参数列表。var leadingThirtysevenList = list.bind(null, 37);

 

// 创建一个函数，它拥有预设的第一个参数var addThirtySeven = addArguments.bind(null, 37);

var list2 = leadingThirtysevenList();// [37]

 

var list3 = leadingThirtysevenList(1, 2, 3);// [37, 1, 2, 3]

 

var result2 = addThirtySeven(5);// 37 + 5 = 42

 

var result3 = addThirtySeven(5, 10);// 37 + 5 = 42 ，第二个参数被忽略