小編給大家分享一下JS知識(shí)點(diǎn)有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、舒城網(wǎng)站維護(hù)、網(wǎng)站推廣。
只要塊級(jí)作用域存在let命令，它所聲明的變量就“綁定”這個(gè)區(qū)域，不再受外部的影響。這么說(shuō)可能有些抽象，舉個(gè)例子：
重慶分公司
重慶分公司
var temp = 123;
if(true) {
console.log(temp);
let temp;
}結(jié)果：
> ReferenceError: temp is not defined
在代碼塊內(nèi)，使用let聲明變量之前，該變量都是不可用的。在語(yǔ)法上，稱為“暫時(shí)性死區(qū)”。（temporal dead zone）
ES6規(guī)定暫時(shí)性死區(qū)和let、const語(yǔ)句不出現(xiàn)變量提升，主要是為了減少運(yùn)行時(shí)錯(cuò)誤，防止在變量聲明前就使用這個(gè)變量，從而導(dǎo)致意料之外的行為。
這兩個(gè)方法都可以改變一個(gè)函數(shù)的上下文對(duì)象，只是接受參數(shù)的方式不一樣。
call接收的是逗號(hào)分隔的參數(shù)。
apply接收的是參數(shù)列表。
相信你肯定看到過(guò)這樣的代碼：
var arr = [1, 2, 3]; var max = Function.prototype.apply.call(Math.max, null, arr); console.log(max); // 3
那么對(duì)這段代碼怎么理解呢？
1.將Function.prototype.apply看成一個(gè)整體
(Function.prototype.apply).call(Math.max, null, arr)
2.func.call(context, args)可以轉(zhuǎn)化為context.func(args)
所以代碼被轉(zhuǎn)換為：
Math.max.apply(undefined, arr)
基本上到這一步已經(jīng)沒(méi)必要去解釋了。
那么你有沒(méi)有試過(guò)將call和apply互換位置呢？
var arr = [1, 2, 3]; var max = Function.prototype.call.apply(Math.max, null, arr); console.log(max); // -Infinity
為什么的它的輸出結(jié)果為-Infinity呢？
因?yàn)閍pply的第二參數(shù)必須為數(shù)組，這里并不是，所以參數(shù)不能正確的傳遞給call函數(shù)。
根據(jù)func.apply(context, args)可以轉(zhuǎn)化為context.func(args)。所以被轉(zhuǎn)化成了Math.max.call()， 直接調(diào)用則會(huì)輸出-Infinity。
如果想要正確調(diào)用，則應(yīng)這樣書寫：
var arr = [1, 2, 3]; var max = Function.prototype.call.apply(Math.max, arr); console.log(max); // 3
為了鞏固以上內(nèi)容，且看一個(gè)面試題：
var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);
alert(a);分析彈出的a值為多少？
// 將call方法看成一個(gè)整體
(Function.prototype.call).apply(function(a){return a;}, [0,4,3]);
// func.apply(context, args)可以轉(zhuǎn)化為context.func(...args)
(function(a){return a;}).call(0, 4, 3);
// 所以結(jié)果很明顯，輸出4作用：用來(lái)自定義對(duì)象中的操作。
let p = new Proxy(target, handler)
target 代表需要添加代理的對(duì)象，handler 用來(lái)自定義對(duì)象中的操作，比如可以用來(lái)自定義 set 或者 get 函數(shù)。
且看一個(gè)的小栗子：
// onChange 即要進(jìn)行的監(jiān)聽操作
var watch = (object, onChange) => {
const handler = {
// 如果屬性對(duì)應(yīng)的值為對(duì)象，則返回一個(gè)新的Proxy對(duì)象
get(target, property, receiver) {
try {
return new Proxy(target[property], handler);
} catch (err) {
return Reflect.get(target, property, receiver);
}
},
// 定義或修改對(duì)象屬性
defineProperty(target, property, descriptor) {
onChange('define',property);
return Reflect.defineProperty(target, property, descriptor);
},
// 刪除對(duì)象屬性
deleteProperty(target, property) {
onChange('delete',property);
return Reflect.deleteProperty(target, property);
}
};
return new Proxy(object, handler);
};
// 測(cè)試對(duì)象
var obj = {
name: 'bjw',
age: 22,
child: [1, 2, 3]
}
// 對(duì)象代理
var p = watch(obj1, (type, property) => {
console.log(`類型：${type}, 修改的屬性：${property}`)
});
p.name = 'qwe'
類型：define, 修改的屬性：name
"qwe"
p.child
Proxy {0: 1, 1: 2, 2: 3, length: 3}
p.child.push(4)
類型：define, 修改的屬性：3
類型：define, 修改的屬性：length
4
p.child.length = 2
類型：define, 修改的屬性：length
2
p.child
Proxy {0: 1, 1: 2, length: 2} 如果關(guān)注Vue進(jìn)展的話，可能已經(jīng)知道Vue3.0中將通過(guò)Proxy來(lái)替換原來(lái)的Object.defineProperty來(lái)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式。之所以要用Proxy替換原來(lái)的API原因在于Proxy無(wú)需一層層遞歸為每個(gè)屬性添加代理，一次即可完成以上操作。性能上更好，并且原本的實(shí)現(xiàn)有一些數(shù)據(jù)更新不能監(jiān)聽到，但Proxy可以完美監(jiān)聽到任何方式的數(shù)據(jù)改變，相信通過(guò)上面的例子已經(jīng)能夠感受到Proxy帶來(lái)的優(yōu)勢(shì)了。唯一的缺點(diǎn)可能就是瀏覽器兼容性不太好了。
為什么要有這樣一個(gè)對(duì)象？
用一個(gè)單一的全局對(duì)象去存儲(chǔ)這些方法，能夠保持其他的JavaScript代碼整潔、干凈。（不然的話得通過(guò)原型鏈調(diào)用）
將一些命令式的操作delete、in使用函數(shù)代替，目的是為了讓代碼更好維護(hù)，避免出現(xiàn)更多的保留字。
Reflect對(duì)象擁有以下靜態(tài)方法：
Reflect.apply
Reflect.construct
Reflect.defineProperty
Reflect.deleteProperty
Reflect.enumerate // 廢棄的
Reflect.get
Reflect.getOwnPropertyDescriptor
Reflect.getPrototypeOf
Reflect.has
Reflect.isExtensible
Reflect.ownKeys
Reflect.preventExtensions
Reflect.set
Reflect.setPrototypeOf
具體函數(shù)細(xì)節(jié)：
// target：目標(biāo)函數(shù) // this：綁定的上下文對(duì)象 // arguments：函數(shù)的參數(shù)列表 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);
// 這個(gè)方法，提供了一種新的不使用new來(lái)調(diào)用構(gòu)造函數(shù)的方法
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;
};
// 測(cè)試 (這兩種是一致的)
var tom = new A('tom');
var tom = Reflect.construct(A, ['tom']);
// jnney繼承了A的實(shí)例屬性，同時(shí)繼承了B的共享屬性
// 簡(jiǎn)單來(lái)說(shuō)，A構(gòu)造函數(shù)被調(diào)用，但是 jnney.__proto__ === B.prototype
var jnney = Reflect.construct(A, ['jnney'], B);這個(gè)方法和Object.definePropperty（屬性定義失敗，會(huì)拋出一個(gè)錯(cuò)誤，成功則返回該對(duì)象）相似，不過(guò)Reflect.defineProperty（屬性定義失敗，返回false，成功則返回true）返回的是一個(gè)Boolean值。
let obj = {};
let obj1 = Object.defineProperty(obj, 'name', {
enumerable: true,
value: 'bjw'
});
// 這里會(huì)返回false 因?yàn)槲覀兩厦娑xname這個(gè)屬性是不可修改的,
// 然后我們又在這里修改了name屬性,所以修改失敗返回值為false
let result1 = Reflect.defineProperty(obj, 'name', {
configurable: true,
enumerable: true,
value: 'happy'
});
console.log(result1); // falselet 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); // falseReflect.set(target, propertyKey, value[, receiver])
這個(gè)方法用來(lái)讀取/設(shè)置一個(gè)對(duì)象的屬性，target是目標(biāo)對(duì)象，propertyKey是我們要讀取的屬性，receiver是可選的，如果propertyKey的getter函數(shù)里面有this值，那么receiver就是這個(gè)this所代表的上下文。
Reflect.getOwnPropertyDescriptor(target, propertyKey)
這個(gè)方法與Object.getOwnPropertyDescriptor方法類似，其中target是目標(biāo)對(duì)象，propertyKey是對(duì)象的屬性，如果這個(gè)屬性存在屬性描述符的話就返回這個(gè)屬性描述符；如果不存在的話，就返回undefined。(如果第一個(gè)參數(shù)不是對(duì)象的話，那么Object.getOwnPropertyDescriptor會(huì)將這個(gè)參數(shù)強(qiáng)制轉(zhuǎn)換為對(duì)象，而方法 Reflect.getOwnPropertyDescriptor會(huì)拋出一個(gè)錯(cuò)誤。)
var obj = {age: 22}
Reflect.getOwnPropertyDescriptor(obj, 'age')
{value: 22, writable: true, enumerable: true, configurable: true}Reflect.setPrototypeOf(target, prototype)
這個(gè)方法與Object.getPrototypeOf方法是一樣的，都是返回一個(gè)對(duì)象的原型，也就是內(nèi)部的[[Prototype]]屬性的值。
Reflect.setPrototypeOf與Object.setPrototypeOf方法的作用是相似的，設(shè)置一個(gè)對(duì)象的原型，如果設(shè)置成功的話，這個(gè)對(duì)象會(huì)返回一個(gè)true；如果設(shè)置失敗，這個(gè)對(duì)象會(huì)返回一個(gè)false。
這個(gè)方法相當(dāng)于ES5的in操作符，就是檢查一個(gè)對(duì)象上是否含有特定的屬性；我們繼續(xù)來(lái)實(shí)踐這個(gè)方法：
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這個(gè)函數(shù)檢查一個(gè)對(duì)象是否是可以擴(kuò)展的，也就是是否可以添加新的屬性。(要求target必須為一個(gè)對(duì)象，否則會(huì)拋出錯(cuò)誤)
let obj = {};
let r1 = Reflect.isExtensible(obj);
console.log(r1); // true
// 密封這個(gè)對(duì)象
Object.seal(obj);
let r2 = Reflect.isExtensible(obj);
console.log(r2); // false使用模塊化，可以為我們帶來(lái)以下好處：
解決命名沖突
提供復(fù)用性
提高代碼可維護(hù)性
在早期，使用立即執(zhí)行函數(shù)實(shí)現(xiàn)模塊化，通過(guò)函數(shù)作用域解決了命名沖突、污染全局作用域的問(wèn)題。
這兩種實(shí)現(xiàn)方式已經(jīng)很少見(jiàn)到，具體的使用方式如下：
// AMD
define(['./a', './b'],function(a, b){
// 模塊加載完畢可以使用
a.do();
b.do();
});
// CMD
define(function(require, exports, module){
// 加載模塊
var a = require('./a');
});CommonJS最早是Node在使用，目前可以在Webpack中見(jiàn)到它。
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1;
// 在b.js中可以引入
var module = require('./a');
module.a // log 1難點(diǎn)解析：
// module 基本實(shí)現(xiàn)
var module = {
id: 'xxx',
exports: {}
}
var exports = module.exports;
// 所以，通過(guò)對(duì)exports重新賦值，不能導(dǎo)出變量ES Module 是原生實(shí)現(xiàn)模塊化方案。
// 導(dǎo)入模塊
import xxx form './a.js';
import { xxx } from './b.js';
// 導(dǎo)出模塊
export function a(){}
// 默認(rèn)導(dǎo)出
export default {};
export default function(){}CommonJS支持動(dòng)態(tài)導(dǎo)入，也就是require(${path}/xx.js),ES Module不支持
CommonJS是同步導(dǎo)入，因?yàn)橛糜?a title="服務(wù)器" target="_blank" >服務(wù)器端，文件都在本地，同步導(dǎo)入即使卡住主線程影響也不大。而ES Module是異步導(dǎo)入，因?yàn)橛糜跒g覽器，需要下載文件，采用同步導(dǎo)入會(huì)對(duì)渲染有很大影響
CommonJS在導(dǎo)出時(shí)都是值拷貝，就算導(dǎo)出值變了，導(dǎo)入的值也不會(huì)改變。如果想更新值，必須重新導(dǎo)入一次。但是ES Module采用實(shí)時(shí)綁定的方式，導(dǎo)入導(dǎo)出的值都指向同一個(gè)內(nèi)存地址，所以導(dǎo)入值會(huì)跟導(dǎo)出值變化
ES Module 會(huì)編譯成 require/exports 來(lái)執(zhí)行的
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函數(shù)
function resolve(value) {
if (_this.state === PENDING) {
_this.state = RESOLVED;
_this.value = value;
_this.resolvedCallbacks.map(cb => cb(_this.value));
}
}
// rejected函數(shù)
function reject(value) {
if (_this.state === PENDING) {
_this.state = REJECTED;
_this.value = value;
_this.rejectedCallbacks.map(cb => cb(_this.value));
}
}
// 當(dāng)創(chuàng)建對(duì)象的時(shí)候，執(zhí)行傳進(jìn)來(lái)的執(zhí)行器函數(shù)
// 并且傳遞resolve和reject函數(shù)
try {
fn(resolve, reject);
} catch (e) {
reject(e);
}
}
// 為Promise原型鏈上添加then函數(shù)
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;
}
// 測(cè)試
new MyPromise(function (resolve, reject) {
setTimeout(() => {
resolve('hello');
}, 2000);
}).then(v => {
console.log(v);
}).then(v => {
console.log(v + "1");
})以上是“JS知識(shí)點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
