2019-07-17 JavaScript-原生JS中this指向以及call,apply,bind的个人理解

最新推荐文章于 2022-12-17 19:33:59 发布

xumaozeng

最新推荐文章于 2022-12-17 19:33:59 发布

阅读量215

点赞数 1

分类专栏： JavaScript 文章标签： this指向 apply call bind

本文链接：https://blog.csdn.net/xumaozeng/article/details/96283770

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

2019-07-17 原生JS中this指向以及call,apply,bind的个人理解

描述：在写项目代码中，很多情况下搞不清楚this到底指向哪个对象，应该怎么去改变this的指向，本篇文章就是根据自己的经验理解写出this的几个重要的地方

this的指向

看过掘金的一篇文章，上面写了一句关键的话：this永远指向最后调用它的那个对象
如果这个对象没有定义，那么在非严格模式下代表的是window全局对象，在严格模式下就是指undefined

call方法

在MDN¹中定义：call()方法使用一个指定的this值和单独给出一个或多个参数来调用一个函数
例子：

function Product(name, price) {
    this.name = name;
    this.price = price;
}
function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
}
const food = new Food('cheese', 5);
console.log(food.name);

输出：
call方法
语法：
Function.call(thisArg, arg1, arg2, arg3…)
参数：
thisArg:
在 Function 函数运行时指定的 this 值。需要注意的是，指定的this 值并不一定是该函数执行时真正的 this 值，如果这个函数在非严格模式下运行，则指定为 null 和 undefined 的 this 值会自动指向全局对象（浏览器中就是 window 对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象
arg1, arg2…:
指定的参数列表
返回值：
使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined

apply方法

在MDN¹中定义：apply()方法调用一个具有给定this值的函数，以及一个数组或者类数组对象提供的参数

注意： call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组

例子：

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
console.log(max);
var min = Math.min.apply(null, numbers);
console.log(min);

输出：
apply方法
语法：
Function.apply(thisArg, [argsArray])
参数：
thisArg:
可选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装
argsArray:
可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象
返回值：
调用有指定this值和参数的函数的结果

bind方法

在MDN¹中定义：bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用

注意：bind()与call()一样，唯一的区别就是bind()返回一个新的函数，需要手动的调用一下

例子：

var module = {
    x: 42,
    getX: function() {
        return this.x;
    }
}
var unboundGetX = module.getX;
console.log(unboundGetX());
var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());

输出：
bind方法
语法：
Function.bind(thisArg, arg1, arg2…)
参数：
thisArg:
调用绑定函数时作为this参数传递给目标函数的值。如果使用new运算符构造绑定函数，则忽略该值。当使用bind在setTimeout中创建一个函数（作为回调提供）时，作为thisArg传递的任何原始值都将转换为object。如果bind函数的参数列表为空，执行作用域的this将被视为新函数的thisArg
arg1, arg2…:
当目标函数被调用时，预先添加到绑定函数的参数列表中的参数
返回值：
返回一个原函数的拷贝，并拥有指定的this值和初始参数