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, 禁止轉載 🈲️，侵權必究⚠️！

---