js this All In One

js this All In One

bind, call, apply 的相同点: 都是用于修改 this 绑定的上下文，

bind, call, apply 的不同点/区别:

1. 函数执行时机不同：使用 bind 后的方法不会立即执行，必须要手动调用方法才会执行，而使用 call 与 apply 后的方法会立即执行；

2. 传参形式不同：bind 与 call 接收的是参数列表，而 apply 接收的是参数数组；

this

this;

// 浏览器中 this 是 window 对象
this === window;
// true

// Node.js中 this 不是 global 对象, 是一个空对象 {}
this === global;
// false

log('this === global', this === global);
// false
log('this =', this);
// {}
log('global =', global);
/*
global = Object [global] {
  global: [Circular],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Function]
  },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function]
  }
}

*/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

V8 引擎，单线程， Web Workers, Sevices Workers

事件循环:

宏任务: setTimeout, setInterval, requestAnimationFrame

微任务: queueMicrotask, Promise, Async Await,

globalThis

// 用于判断当前 js 的运行环境

const env = globalThis.window ? '浏览器环境': 'Node.js 环境';

console.log('js env =', env);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

https://developer.mozilla.org/en-US/docs/Glossary/Global_object

bind

bind(thisArg)
bind(thisArg, arg1)
bind(thisArg, arg1, arg2)
bind(thisArg, arg1, ... , argN)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

call

参数列表

call()
call(thisArg)
call(thisArg, arg1)
call(thisArg, arg1, arg2)
call(thisArg, arg1, ... , argN)

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  // ES5 继承
  Product.call(this, name, price);
  this.category = 'food';
}

const food = new Food('cheese', 5);

console.log('food name =', food.name);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

apply

a => array => 参数数组

apply(thisArg)
apply(thisArg, argsArray)

const numbers = [5, 6, 2, 3, 7];

// Math.max 参数列表 ?? 参数数组
// const max = Math.max(...numbers);

const max = Math.max.apply(null, numbers);
// const max = Math.max.apply(numbers, numbers);
console.log(max);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

demos

interview question

const log = console.log;

var name = 'abc';

function func () {
    log('this.name =', this.name);
}

var obj = {
    name: 'xyz',
    func: func,
};

// ES5 中 this 绑定的上下文 与 function 定义时候的位置无关，只与与 function 被调用的时候的上下文有关；
// 但是可以使用 bing, call, apply 改变调用时候 this绑定的上下文

const test1 = obj.func;
const test2 = obj.func.bind(obj);

const test3 = obj.func.call(obj);
const test4 = obj.func.apply(obj);

log('\ntest1 =', test1());
log('test2 =', test2());

log('\ntest3 =', test3());
log('test4 =', test4());

refs

Math.max()
Math.max(value0)
Math.max(value0, value1)
Math.max(value0, value1, /* ... ,*/ valueN)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---