详解js中的call、apply、bind、this

已于 2022-09-16 17:19:21 修改
阅读量155 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端 开发语言
于 2022-09-16 17:16:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46884182/article/details/126871847
版权
this的指向

默认绑定一般发生在回调函数,函数直接调用;

function test() {
    //严格模式下是undefined
    //非严格模式下是window
    console.log(this);
}
setTimeout(function () {
    //setTimeout的比较特殊
    //严格模式和非严格模式下都是window
    console.log(this);
});

arr.forEach(function () {
    //严格模式下是undefined
    //非严格模式下是window
    console.log(this);
});

隐式绑定：ES5中，this 永远指向最后调用它的那个对象

//例1：
var name = "windowsName";function a() {
    var name = "Cherry";

    console.log(this.name);  // windowsName

    console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this)         // outer: Window
//调用 a 的地方 a(),前面没有调用的对象,那么就是全局对象 window,这就相当于是 window.a()；
//注意，这里没有使用严格模式,如果使用严格模式的话,全局对象就是 undefined,
//那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined。


//例2：
var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name); // Cherry
    }
}
a.fn();
//函数 fn 是对象 a 调用的，所以打印的值就是 a 中的 name 的值


//例3：
var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name); // Cherry
    }
}
window.a.fn();
//调用它的对象仍然是对象 a。


//例4：
var name = "windowsName";
var a = {
    //name: "Cherry",
    fn : function () {
        console.log(this.name); // undefined
    }
}
window.a.fn();
//最后调用 fn 的对象是 a，就算 a 中没有 name 这个属性，也不会继续向上一个对象寻找 this.name，而是直接输出 undefined


//例5：
var name = "windowsName";
var a = {
    name : null,
    // name: "Cherry",
    fn : function () {
        console.log(this.name);  // windowsName
    }
}

var f = a.fn;
f();
//虽然将 a 对象的 fn 方法赋值给变量 f 了，但是没有调用, 
//由于 “this永远指向最后调用它的那个对象”, f 并没有调用fn(),
// fn()最后仍然是被 window 调用的。所以 this 指向的也就是 window。


// 例6：
var name= "windowsName";
function fn() {
    var name = 'Cherry';
    innerFunction();
    function innerFunction() {
        console.log(this.name);  // windowsName
    }
}
fn()
// fn() 是window调用的，因此this 指向 window

//例7：
var name= "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout(function () {
            this.func1()
        },100);
    }
};

a.func2()     // this.func1 is not a function
//最后调用 setTimeout 的对象是 window，但是在 window 中并没有 func1 函数，所以会报错

箭头函数
箭头函数的 this 始终指向函数定义时的 this，而非执行时。
箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

//例8：
var name= "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout(()=>{
            this.func1()
        },100);
    }
};

a.func2()  //Cherry

new 绑定

function test(){
	this.a = 2
	console.log(this)
}

var obj = new Test() //this指向new的实例对象

在函数内部使用 _this = this
先将调用这个函数的对象保存在变量 _this 中，然后在函数中都使用这个 _this，这样 _this 就不会改变了

//例9：
var name= "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        var _this = this
        setTimeout(function(){
            _this.func1()
        },100);
    }
};

a.func2()  //Cherry
//在 func2 中，首先设置 var _this = this，这里的 this 是调用 func2 的对象 a，
//为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。
//我们将 this(指向变量 a) 赋值给一个变量 _this，
//这样，在 func2 中我们使用 _this 就是指向对象 a 了。

使用 apply、call、bind

const obj1 = {
    name: 'joy',
    getName() {
        console.log(this); 
        console.log(this.name); 
    }
};

const obj2 = {
    name: 'sam'
};

obj1.getName.call(obj2); //obj2 sam
obj1.getName.apply(obj2); //obj2 sam
const fn = obj1.getName.bind(obj2);
fn();//obj2 sam


//例10：使用apply
var name= "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout(function(){
            this.func1()
        }.apply(a),100);
    }
};
a.func2()  //Cherry


//例11：使用call
var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.call(a),100);
    }
};
a.func2()  // Cherry


//例12：使用bind
var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.bind(a)(),100);
    }
};
a.func2()  // Cherry

apply、call、bind 区别

apply 和 call 只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。
bind() 是创建了一个新的函数，需要手动去调用

fn.apply(thisArg, argsArray)
参数：
thisArg 在 func 函数运行时使用的 this 值。但是，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
argsArray 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。

//例13：
var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b)
    }
}

var b = a.fn;
b.apply(a,[1,2])     // 3

fn.call(thisArg, arg1, arg2, …)
参数：arg1, arg2, … 指定的参数列表。

//例14：
var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b)
    }
}

var b = a.fn;
b.call(a,1,2) // 3

//例15：
var sData = 'Wisen';
function display() {
  console.log('值是：', this.sData);
}

display.call();  // sData value is Wisen
//调用函数方法时，如果没有传递第一个参数，this 的值将会被绑定为全局对象。
// 在严格模式下，this 的值将会是 undefined。


//例16：
function greet(){
  var animal = this.name + '-----' + this.hobby
  console.log(animal)
}

var obj = {
  name: 'cats',
  hobby: 'palying'
}

greet.call(obj) //cats-----palying
//调用函数方法时，该方法的this值会绑定到 obj 对象。


//例17：
function Procuct(name, price){
  this.name = name
  this.price = price
}

function Food(name, price){
  Procuct.call(this, name, price)
  this.category = 'food'
}

function Toy(name, price){
  Procuct.call(this, name, price)
  this.category = 'toy'
}

var cheese = new Food('feta', 5)
var fun = new Toy('robot', 10)
//console.log(cheese, fun)
//在一个子构造函数中，通过调用父构造函数的 call 方法可以实现继承。

fn.bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

//例18：
var a ={
    name : "Cherry",
    fn : function (a,b) {
        console.log( a + b)
    }
}

var b = a.fn;
b.bind(a,1,2)  //没有输出
b.bind(a,1,2)()  //输出 3。  bind 是创建一个新的函数，因此必须要手动去调用

//例19：
var x = 9 // 全局环境中 this指向window
var module = {
  x: 81,
  getX: function(){ return this.x }
}

module.getX() // 81

var reX = module.getX
reX() //9  函数是在全局作用域中调用的

var boundX = reX.bind(module)
boundX() // 81 创建了新函数，this绑定到了module对象

最后：
这几种this的绑定方式，优先级的先后为：

箭头函数 -> new绑定 -> 显示绑定call/bind/apply -> 隐式绑定 -> 默认绑定

改变this的指向：

  1. 使用 ES6 的箭头函数；
  2. 在函数内部使用 _this = this；
  3. 使用 apply、call、bind；
  4. new 实例化一个对象；

参考：
https://juejin.cn/post/6844903496253177863

nicole bai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js中的apply、call和bind方法
weixin_45693198的博客
09-21 2500
背景 JS中有一个关键概念叫做执行上下文，也就是JavaScript 代码被解析和执行时的环境。执行上下文有三种类型：全局执行上下文、函数执行上下文和Eval 函数执行上下文。在执行上下文的创建阶段，会确定当前执行上下文中this指针的指向。 而call，apply，bind的作用，就是改变函数执行时的上下文，即改变函数内部的this指向。 Apply，Call 参考资料 ...
javascript中call apply 与 bind方法详解
10-22
在JavaScript中，`call`、`apply`和`bind`都是与函数调用相关的三个重要方法，它们都允许我们改变函数内部`this`的指向，从而实现不同对象间的方法复用和灵活控制上下文环境。下面我们将分别详细介绍这三个方法。 1...
js手写call()，apply()，bind() (this 绑定问题)
weixin_40840206的博客
03-17 552
this绑定 关于实现call()，bind()，apply()最离不开的话题便是this绑定问题 this默认绑定 this的默认绑定也称window绑定，是下面四种绑定之外的this绑定，出现于在js中无任何前缀直接调用函数。例如： // 非严格模式下 function fun() { console.log(this) } fun() // window对象 需要注意的是，在严格模式下，默认绑定的this指向的是undefined。 'use strict'; function fun()
js中.bind()和.call()用法讲解
weixin_34337265的博客
01-18 2180
var option = { ti : 8, it(){ return this.ti; } } 这里又一个option对象，it()方法里的this指的就是option对象的上下文。 console.log(option.it()); 直接输出option.it()...
JavaScript中call、apply、bind详解及手写实现
最新发布
to_the_Future的博客
03-31 781
首先，我们都知道JavaScript中的this指向分为软绑定及硬绑定。并且this的指向与执行上下文有关系。在全局执行上下文中，this指向 全局对象（），在对象调用其内部方法时，this指向调用的地方，这就称为。那么如何使用呢？这就需要使用JavaScript中内置的方法来实现了。
JavaScript进阶 —— 深入理解 call，apply 和 bind
金戈鐡馬
03-28 1566
在JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解，并列出几个经典应用场景。1、call。
call ,apply和bind方法 详解
热门推荐
06-19 2万+
JavaScript 函数call、apply和bind的区别和用法详解
详解js中call apply bind
weixin_34313182的博客
12-04 69
2019独角兽企业重金招聘Python工程师标准>>> ...
JS中的call、apply、bind方法详解
qq_39075021的博客
02-15 771
目录 1. apply、call、bind 2. 应用场景 3. bind 4. 手动实现bind函数 1. apply、call、bind 介绍 在 js 中，每个函数的原型都指向Function.prototype对象（js基于原型链的继承），而call，apply和bind是Function.prototype下的方法，因此每个函数都会有apply，call，和bind方法，这些方...
javaScript中的call、apply、bind函数以及this指向详解
酒客的博客
12-11 535
javaScript中的call、apply、bind函数以及this指向问题的详解 ​ call、apply、bind这三个方法都可以用来改变this的指向。三者最大的区别是call和apply会改变this的指向并且立即执行函数，但是bind方法不会立即执行函数，而是会返回this改变后的函数。 fn.call() 当call方法执行的时候会做三个事情： 1.首先要把操作的函数中的this关键字变为call方法第一个传递的参数。 2.把call方法第二个及以后的参数获取到 3.把要操作的函数执行，并且
Javascript中call，apply，bind方法的详解与总结
10-20
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧
详解JS中的this、apply、call、bind(经典面试题)
10-19
JS中的this、apply、call、bind是一道经典面试题，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。下面就跟随脚本之家小编一起学习this、apply、call、bind的知识吧
数组方法之map()
csdn_46884182的博客
11-14 2260
var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); [ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxCallback ); // NaN [ { x: 2 }, { x: 22 } ].reduce( maxCallback ); // 22 // console.log([ { x: 2 }, { x: 22 } ].reduce( maxCallback )) //22 // redu
纯前端实现简单的增删改查
csdn_46884182的博客
10-21 2237
vue纯前端实现简单的增删改查
js中常见的循环遍历
csdn_46884182的博客
03-17 577
1. for循环，可以break结束循环。 arr = [1,2,3,4,5,6] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) //1,2,3,4,5,6 } 2. for...in循环，用于对象循环遍历，可获取对象的对应键值 [注意]：for…in循环对象的所有枚举属性，需再使用hasOwnProperty()方法来忽略继承属性，即在循环内部判断一下，某个属性是否为对象自身的属性，避免出现遍历失真的情况。 let o
js同步、异步、延时、无阻塞加载
csdn_46884182的博客
12-26 519
转载：https://www.cnblogs.com/elves/p/5866878.html 一、同步加载 平常默认用的都是同步加载。 如： <script src="http://yourdomain.com/script.js"></script> 同步模式又称阻塞模式。会阻止浏览器的后续处理。停止后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。 通常会.
js手写题——深拷贝和浅拷贝
csdn_46884182的博客
08-26 309
深拷贝浅拷贝
js手写题——数组去重和数组排序
csdn_46884182的博客
09-15 261
数组去重和排序
js call apply bind
03-17
JavaScript 中有三个方法可以改变函数执行上下文：call()、apply() 和 bind()。 - call() 方法可以将函数设置为对象的方法，并立即执行该函数。 - apply() 方法与 call() 方法类似，只是第二个参数需要是一个参数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值