js中怎么改变this指向

call和apply来自Function.prototype;

所以所有的函数都可以使用;
特点是可以自由指定函数内部的this;
区别是传参的方式不同。

call()

---

    语法： 函数.call(this, arg1, arg2, arg3, arg4)
    第一个参数用来指定函数内部的this指向，后面的参数是函数执行时所需的实参。

   
   

    
    
     
     
function add(a, b) {
    console.log(this.length + a + b);
}
add.call([1, 2, 3], 10, 50);
   
   
   
   

    
    

   
   

apply()

---

    语法： 函数.apply(this, []);
    第一个参数用来指定函数内部的this指向;
    第二个参数要求是一个数组或者伪数组，apply会把它平铺然后传入对应的函数中.

    可以平铺数据;

   
   

    
    
     
     
function add(a, b) {
    console.log(this.length + a + b);
}
add.apply([1, 2, 3], [10, 50]);
   
   
   
   

    
    

   
   
   
   

    
    
bind方法
    
    

    
    

     
     
* es5在Function.prototype上新增了一个bind方法，
* 该方法返回一个函数，这个函数可以认为是绑定了this的clone版本。
* 语法：新函数 = 函数.bind(this)
*
* bind和call、apply的异同：
* 1、相同之处是都可以改变函数运行时内部的this
* 2、不同之处是call和apply是一次性改变this，bind是永久性改变this
*
* 可以认为bind的灵活性更高，你可以先把this绑定好，
* 然后什么时候想执行就什么时候执行。
* */
    
    
    
    

     
     

function fn() {
    console.log(this.length);
}

// newFn相当于是fn的clone版本，但是this为固定化了
var newFn = fn.bind([1,2,3,4]);
newFn();
newFn();
newFn();

// 可以利用bind得到多个fn的clone版本
var newFn2 = fn.bind('好吧');
newFn2();
newFn2();
    
    
   
   

call、apply对不同参数this的处理
   
   
        1、不传参，或者传入null和undefined，this指向window;
        2、传入基本数据类型(null和undefined除外)，this指向他们的包装对象;
        3、传入的是对象，this就指向这个对象;

    
    
function fn() {
    console.log(this);
}
// this为window
fn.call();
fn.apply(null);
fn.apply(undefined);
// this为对应的包装对象
fn.apply(1);
fn.apply('abc');
fn.call(false);

模拟call 和 apply 方法

// 函数调用该方法，可以指定函数的this
Function.prototype.myApply = function(param) {
    /*2
    * 实现思路：
    * 1、把函数存储到指定的this中
    * 2、通过指定的this调用函数，实现一个方法调用模式，这样函数的this就是指定的this
    * */

    // 这里的this，谁调用myApply，就是谁
    param.__fn__ = this;

    // myApply内部，反回来再调用this(调用myAppy的那个函数)。
    // 但是调用模式发生了改变，造成函数的this发生了改变。
    param.__fn__();

    // __fn__使用完毕后，删除掉
    delete param.__fn__;
};

利用call 和 apply 借用其他数据类型方法

/*
* call和apply可以借用其他对象的方法去操作指定的对象。
*
* 通常实例的方法内部在实现时，都会使用this来获取对应的实例，
* 即这些方法内部操作的都是this。
*
* 如果一个方法内部没有操作this，那么是无法借用成功的。
*
* 借用一个方法操作我们指定的对象，如何操作需要看这个方法具体的功能。
* */

/*// 给所有的数组添加一个遍历打印值的方法 conArr
Array.prototype.conArr = function() {
    // 这里通过this，可以获取调用conArr方法的数组，
    // 那么谁调用这个方法，我们就打印谁的值。
    var i, len;
    for (i = 0, len = this.length; i < len; i++) {
        console.log(this[i]);
    }
};

// 数组调用这个，依次打印1、2、3
var arr = [1,2,3];
arr.conArr();

var arr2 = ['a','b','c'];
arr2.conArr();*/


/*------------------------------------------*/

// 这是一个伪数组对象
var obj = {
    0: 'abc',
    1: 'qwe',
    2: 'wsx',
    3: 'edc',
    name: '肥猫',
    age: '3',
    length: 5
};

/*// 伪数组不是真数组，无法调用真数组的那些方法。
//obj.conArr();

// 但是我们还想利用数组的conArr方法，打印伪数组中下标存储的数据。
// conArr方法有一个特点，它内部操作的是this，
// 如果我们能够让这个this指向obj，那么conArr就可以操作obj了。
//Array.prototype.conArr.call(obj);
[].conArr.call(obj);

// 既然可以通过call借用数组的conArr方法，那么其他方法是否可行呢？

// 借用push方法给伪数组添加新值
[].push.call(obj, 10, 20, 30, 40, 50);
console.log(obj);

// 借用pop删除伪数组中最后一个值
[].pop.call(obj);
console.log(obj);*/

// 借用slice截取伪数组的一部分，得到一个新数组
//console.log([].slice.call(obj, 1));

// 如果一个伪数组需要多次使用真数组的那些方法，可以考虑把伪数组转化为真数组
console.log([].slice.call(obj));  // slice在截取的时候，只会截取存在的值
console.log([].concat.apply([], obj)); // apply会根据length平铺得到所有的值传给concat