一些你可能不熟悉的JS知識點總結

// target：目標函數
// this：綁定的上下文對象
// arguments：函數的參數列表
Reflect.apply(target, this, arguments)

const arr = [2, 3, 4, 5, 6];
let max;
// ES6
max = Reflect.apply(Math.max, null, arr)

// ES5 
max = Math.max.apply(null, arr);
max = Function.prototype.apply.call(Math.max, null, arr);

// 這個方法，提供了一種新的不使用new來調用構造函數的方法
function A(name) {
 console.log('Function A is invoked!');
 this.name = name;
}
A.prototype.getName = function() {
 return this.name;
};

function B(age) {
 console.log('Function B is invoked!');
 this.age = age;
}
B.prototype.getAge = function() {
 return this.age;
};


// 測試 (這兩種是一致的)
var tom = new A('tom');
var tom = Reflect.construct(A, ['tom']);


// jnney繼承了A的實例屬性，同時繼承了B的共享屬性
// 簡單來說，A構造函數被調用，但是 jnney.__proto__ === B.prototype
var jnney = Reflect.construct(A, ['jnney'], B);

let obj = {};

let obj1 = Object.defineProperty(obj, 'name', {
 enumerable: true,
 value: 'bjw' 
});

// 這里會返回false 因為我們上面定義name這個屬性是不可修改的,
// 然后我們又在這里修改了name屬性,所以修改失敗返回值為false
let result1 = Reflect.defineProperty(obj, 'name', {
 configurable: true,
 enumerable: true,
 value: 'happy'
});
console.log(result1); // false

let obj = {
 name: 'dreamapple',
 age: 22
};

let r1 = Reflect.deleteProperty(obj, 'name');
console.log(r1); // true
let r2 = Reflect.deleteProperty(obj, 'name');
console.log(r2); // true
let r3 = Reflect.deleteProperty(Object.freeze(obj), 'age');
console.log(r3); // false

var obj = {age: 22}
Reflect.getOwnPropertyDescriptor(obj, 'age')
{value: 22, writable: true, enumerable: true, configurable: true}

function A(name) {
 this.name = name || 'dreamapple';
}
A.prototype.getName = function() {
 return this.name;
};

var a = new A();

console.log('name' in a); // true
console.log('getName' in a); // true

let r1 = Reflect.has(a, 'name');
let r2 = Reflect.has(a, 'getName');
console.log(r1, r2); // true true

let obj = {};
let r1 = Reflect.isExtensible(obj);
console.log(r1); // true
// 密封這個對象
Object.seal(obj);
let r2 = Reflect.isExtensible(obj);
console.log(r2); // false

// AMD
define(['./a', './b'],function(a, b){
 // 模塊加載完畢可以使用
 a.do();
 b.do(); 
});

// CMD
define(function(require, exports, module){
 // 加載模塊
 var a = require('./a'); 
});

// a.js
module.exports = {
 a: 1
}

// or 
exports.a = 1;

// 在b.js中可以引入
var module = require('./a');
module.a // log 1

// module 基本實現
var module = {
 id: 'xxx',
 exports: {}
}

var exports = module.exports;
// 所以，通過對exports重新賦值，不能導出變量

// 導入模塊
import xxx form './a.js';
import { xxx } from './b.js';

// 導出模塊
export function a(){}

// 默認導出
export default {};
export default function(){}

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

function MyPromise(fn) {
 const _this = this;
 _this.state = PENDING;
 _this.value = null;
 _this.resolvedCallbacks = [];
 _this.rejectedCallbacks = [];


 // resolve函數
 function resolve(value) {
 if (_this.state === PENDING) {
 _this.state = RESOLVED;
 _this.value = value;
 _this.resolvedCallbacks.map(cb => cb(_this.value));
 }
 }

 // rejected函數
 function reject(value) {
 if (_this.state === PENDING) {
 _this.state = REJECTED;
 _this.value = value;
 _this.rejectedCallbacks.map(cb => cb(_this.value));
 }
 }

 // 當創建對象的時候，執行傳進來的執行器函數
 // 并且傳遞resolve和reject函數
 try {
 fn(resolve, reject);
 } catch (e) {
 reject(e);
 }
}

// 為Promise原型鏈上添加then函數
MyPromise.prototype.then = function (onFulfilled, onRejected) {
 const _this = this;
 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
 onRejected = typeof onRejected === 'function' ? onRejected : r => {
 throw r;
 }
 if (_this.state === PENDING) {
 _this.resolvedCallbacks.push(onFulfilled);
 _this.rejectedCallbacks.push(onRejected);
 }
 if (_this.state === RESOLVED) {
 onFulfilled(_this.value);
 }
 if (_this.state === REJECTED) {
 onRejected(_this.value);
 }
 return _this;
}



// 測試
new MyPromise(function (resolve, reject) {
 setTimeout(() => {
 resolve('hello');
 }, 2000);
}).then(v => {
 console.log(v);
}).then(v => {
 console.log(v + "1");
})