this、apply、call、bind

loey_ln

于 2024-12-06 14:12:30 发布

阅读量1k

点赞数 24

文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/loeyln/article/details/144291213

版权

文章目录

this
call()、apply()、bind()
- bind使用
手撕call、apply及bind方法

this

this的指向

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：

this.alert() <=> window.alert()<=> alert();

全局环境 就是在<script></script>里面，这里的this始终指向的是window对象，

局部环境

1）在全局作用域下直接调用函数，this指向window

2）对象函数调用，哪个对象调用就指向哪个对象

3）使用 new 实例化对象，在构造函数中的this指向实例化对象。

4）使用call或apply改变this的指向

1.普通函数调用，此时 this 指向 window；

在全局作用域中，this 指向 window

function fn() {
   console.log(this);   // window
 }
 fn();  //  window.fn(),此处默认省略window

2.构造函数调用，此时 this 指向实例对象

构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象

 function Person(age, name) {
         this.age = age;
         this.name = name
         console.log(this)  // 此处 this 分别指向 Person 的实例对象 p1 p2
     }
    var p1 = new Person(18, 'zs')
    var p2 = new Person(18, 'ww')

3.对象方法调用，此时 this 指向该方法所属的对象

 var obj = {
       fn: function () {
         console.log(this); // obj
       }
     }
    obj.fn();

4.通过事件绑定的方法，此时 this 指向绑定事件的对象

事件源.onclik = function(){ } this -> 事件源
事件源.addEventListener(function(){ }) this->事件源

<body>
    <button id="btn">hh</button>
<script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        console.log(this); // btn
    }
</script>
</body>

5.定时器函数，此时 this 指向 window

因为定时器中采用回调函数作为处理函数，而回调函数的this 指向 window

 setInterval(function () {
       console.log(this); // window
     }, 1000);

6.箭头函数中的this

箭头函数没有自己的this，箭头函数的this就是上下文中定义的this，因为箭头函数没有自己的this所以不能用做构造函数。

call()、apply()、bind()

每个函数都包含两个非继承而来的方法：call()方法和apply()方法。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变函数体内部this的指向。

改变函数执行时的上下文环境：‌当函数被作为对象的方法调用时，‌this指向调用该方法的对象。‌需要控制函数内部的this指向其他对象，可以使用call、‌apply或bind方法来达到目的。‌

相同点 : 作用一样。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，扩充函数赖以运行的作用域。

不同点 ：接收参数的方式不同。

**apply()方法 **接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
call()方法 不一定接受两个参数，第一个参数也是函数运行的作用域（this），但是传递给函数的参数必须列举出来。
**bind()**只有一个函数，不会立刻执行，负责绑定this并返回一个新方法

	bind	apply	call
是否执行调用的函数	否	是	是
参数	(this指向，参1，参2…)	(this指向，[参数数组])	(this指向，参1，参2…)
用途	改变定时器内部的this指向等	跟数组有关系，比如借助于数学对象实现数组最大值最小值	经常用做继承

bind使用

let btn = document.querySelector('button')
btn.onclick = function() {
    this.disabled = true   // 这个this指向btn
    let that = this
    setTimeout(function() {
        // this.disabled = false  // 定时器函数里面的this指向的是window
        // that.disable = false  可行的方法
        this.disabled = false
    }.bind(this), 3000) 
}

手撕call、apply及bind方法

call()实现思路：

上下文不传默认为window
做防止Function.prototype.myCall()直接调用的判断
把this方法(this指向调用bind()的方法)挂载到上下文对象上，需要用Symbol声明一个对象属性
执行上下文刚挂载的函数，保存返回结果result后，删除挂载的方法
返回结果result

Function.prototype.myCall = function (context = window, ...args) {
  if (this == Function.prototype) {
    return undefined; // 防止Function.prototype.myCall()直接调用
  }
  const fn = Symbol("fn");
  // this指向的是要被执行的函数，也就是call的第一个参数
  // 其实就是把this挂载到上下文对象上，然后执行它，执行完拿到返回结果后，删除挂载的函数
  context[fn] = this;
  const result = context[fn](...args);
  delete context[fn];
  return result;
};
// 示例
const obj = {
  name: "zhangsan",
  age: 18,
};

let fun = function (mes, sym) {
  console.log(mes + sym, this.age + "岁的" + this.name);
};

fun.myCall(obj, "Hello", "!");  // Hello! 18岁的zhangsan

apply()实现思路：

跟call()的实现思路一模一样，只是参数变数组

Function.prototype.myApply = function (context = window, args = []) {
  if (this == Function.prototype) {
    return undefined; // 防止Function.prototype.myApply()直接调用
  }
  const fn = Symbol("fn");
  context[fn] = this;
  const result = context[fn](...args);
  delete context[fn];
  return result;
};
// 示例
const obj = {
  name: "zhangsan",
  age: 18,
};

let fun = function (mes, sym) {
  console.log(mes + sym, this.age + "岁的" + this.name);
};
fun.myApply(obj, ["Hello", "!"]);  // Hello! 18岁的zhangsan

bind()实现思路

初始化上下文不传默认为window
做防止Function.prototype.myBind()直接调用的判断
保存原函数
返回一个新函数，新函数返回传的参数整合了原函数的参数原函数.apply()方法

Function.prototype.myBind = function (context = window, ...args) {
  if (this == Function.prototype) {
    return undefined; // x
  }
  // 拿到原函数
  const fn = this;
  // 返回一个新的函数，函数的参数整合了原函数+新函数
  return function (...newArgs) {
    return fn.apply(context, args.concat(newArgs));
  };
};

// 示例
const obj = {
  name: "zhangsan",
  age: 18,
};

let fun = function (mes, sym) {
  console.log(mes + sym, this.age + "岁的" + this.name);
};
const f = fun.myBind(obj); // 返回新函数
f("Hello", "!");  // Hello! 18岁的zhangsan