JavaScript中改变this指向

欢迎大家访问我的个人博客 http://www.spicyboy.cn

一、this 理解：

• this 是函数的内置对象，谁调用这个函数或方法，this 关键字就指向谁
• 全局作用域或者普通函数中 this 指向全局对象 window
• 对象调用 对象.函数名( ) 谁调用指向谁 (.前面是谁就指向谁)
• 在构造函数或者构造函数原型对象中 this 指向构造函数的实例
• 箭头函数中指向外层作用域的 this

二、改变this指向的方法：

call() 方法：

// 语法：
// 函数名.call(你要改变的函数的 this 指向， 第二个参数开始，依次是给函数传递的参数)
// 会直接把函数给调用
// 第一个参数如果不写或者写一个 null，表示 window

let a = 10;
function fn(b) {
    console.log(this);
    console.log(b);
}
fn.call(a,"gg");  // 直接调用
// Number {10}
// gg

apply() 方法：

// 语法：
// 函数名.apply(你要改变的函数的 this 指向，第二个参数是一个数组(只能有俩个参数)
// 数组里面每一项依次是给函数传递参数)
// 会直接把函数给调用

let a = 10;
function fn(b,c) {
    console.log(this);
    console.log(b);
    console.log(c);
}
fn.apply(a,["bb","cc"]);  // 直接调用
// Number {10}
// bb
// cc

bind() 方法：

// 语法：
// 函数名.bind(你要改变的函数的 this 指向)
// 不会立即执行函数
// 返回值： 就是一个函数（只不过是一个被改变好了 this 指向的函数）
// 他对函数的参数传递有两个方式
// 1. 调用返回的函数的时候传递
// 2. 直接从第二个参数开始依次传递

let a = 10;
function fn(b,c) {
    console.log(this);
    console.log(b);
    console.log(c);
}
var fn1 = fn.bind(a,"bb","cc");  //返回的是改好指向的函数 并没有调用
fn();  //  window   原来函数的指向是不会改变的
fn1();   //Number {10}  

三、call 和 apply性能比较：

• call 的性能在某些浏览器下要明显比 apply 好