JavaScript中Reflect的常用方法及注意事項(xiàng)
一、Reflect基本概念與設(shè)計(jì)目的
1.1 什么是Reflect？
Reflect是ES6引入的一個(gè)內(nèi)置對(duì)象，它提供了一組靜態(tài)方法，用于執(zhí)行那些通常是JavaScript語(yǔ)言?xún)?nèi)部的對(duì)象操作。Reflect的方法與Proxy handlers的方法一一對(duì)應(yīng)，允許開(kāi)發(fā)者以函數(shù)式的方式操作對(duì)象。
核心特點(diǎn)：
- 是一個(gè)內(nèi)置對(duì)象，不是構(gòu)造函數(shù)，不能使用new操作符
- 所有方法都是靜態(tài)方法，類(lèi)似于Math對(duì)象
- 方法與Proxy handlers的方法一一對(duì)應(yīng)
- 提供了更合理的返回值和錯(cuò)誤處理方式
- 以函數(shù)式方式操作對(duì)象，替代了部分Object方法和操作符
1.2 Reflect的設(shè)計(jì)目的
Reflect的引入主要為了解決以下問(wèn)題：
統(tǒng)一對(duì)象操作API：將分散在Object、操作符中的對(duì)象操作統(tǒng)一到Reflect對(duì)象上
函數(shù)式編程風(fēng)格：將對(duì)象操作（如屬性訪(fǎng)問(wèn)、刪除、調(diào)用等）轉(zhuǎn)換為函數(shù)調(diào)用
更合理的返回值：相比Object的某些方法，Reflect方法返回更合理的布爾值表示操作成功與否
與Proxy完美配合：Reflect方法的參數(shù)與Proxy handlers的參數(shù)完全一致，便于在Proxy中調(diào)用
更好的錯(cuò)誤處理：某些操作（如defineProperty）在Object上會(huì)拋出錯(cuò)誤，而Reflect返回false表示失敗
1.3 Reflect與Object的區(qū)別
| 特性 | Reflect | Object |
|---|---|---|
| 調(diào)用方式 | 函數(shù)調(diào)用（Reflect.get(obj, prop)） | 方法調(diào)用（Object.getOwnPropertyDescriptor(obj, prop)） |
| 返回值 | 操作結(jié)果（通常是布爾值） | 操作結(jié)果或拋出錯(cuò)誤 |
| 函數(shù)式風(fēng)格 | 是，所有操作都是函數(shù)調(diào)用 | 否，部分是方法，部分是操作符 |
| Proxy配合 | 完美配合，參數(shù)一致 | 不直接配合 |
| 錯(cuò)誤處理 | 返回false表示失敗 | 拋出TypeError |
| 操作符對(duì)應(yīng) | 提供了操作符的函數(shù)式替代（如Reflect.has對(duì)應(yīng)in操作符） | 無(wú) |
二、Reflect常用方法詳解
2.1 Reflect.get(target, propertyKey [, receiver])
獲取對(duì)象屬性的值，相當(dāng)于target[propertyKey]的函數(shù)式版本。
// 基本用法
const obj = {
name: '張三',
age: 30,
get fullName() {
return this.name + ' (年齡: ' + this.age + ')';
}
};
// 獲取普通屬性
const name = Reflect.get(obj, 'name');
console.log('姓名:', name); // 輸出: 姓名: 張三
// 獲取不存在的屬性
const address = Reflect.get(obj, 'address');
console.log('地址:', address); // 輸出: 地址: undefined
// 獲取getter屬性
const fullName = Reflect.get(obj, 'fullName');
console.log('全名:', fullName); // 輸出: 全名: 張三 (年齡: 30)
// 使用receiver參數(shù)（修改this指向）
const receiver = {
name: '李四',
age: 25
};
const fullNameWithReceiver = Reflect.get(obj, 'fullName', receiver);
console.log('使用receiver的全名:', fullNameWithReceiver); // 輸出: 使用receiver的全名: 李四 (年齡: 25)
// 數(shù)組示例
const arr = [10, 20, 30];
console.log('數(shù)組元素:', Reflect.get(arr, 1)); // 輸出: 數(shù)組元素: 20
運(yùn)行結(jié)果：
姓名: 張三
地址: undefined
全名: 張三 (年齡: 30)
使用receiver的全名: 李四 (年齡: 25)
數(shù)組元素: 20
2.2 Reflect.set(target, propertyKey, value [, receiver])
設(shè)置對(duì)象屬性的值，相當(dāng)于target[propertyKey] = value的函數(shù)式版本。
const obj = {
name: '張三',
age: 30,
set setAge(value) {
this.age = value;
}
};
// 設(shè)置普通屬性
const setNameResult = Reflect.set(obj, 'name', '李四');
console.log('設(shè)置姓名結(jié)果:', setNameResult); // 輸出: 設(shè)置姓名結(jié)果: true
console.log('設(shè)置后的姓名:', obj.name); // 輸出: 設(shè)置后的姓名: 李四
// 設(shè)置新屬性
const setAddressResult = Reflect.set(obj, 'address', '北京');
console.log('設(shè)置地址結(jié)果:', setAddressResult); // 輸出: 設(shè)置地址結(jié)果: true
console.log('設(shè)置后的地址:', obj.address); // 輸出: 設(shè)置后的地址: 北京
// 調(diào)用setter
const setAgeResult = Reflect.set(obj, 'setAge', 35);
console.log('設(shè)置年齡結(jié)果:', setAgeResult); // 輸出: 設(shè)置年齡結(jié)果: true
console.log('設(shè)置后的年齡:', obj.age); // 輸出: 設(shè)置后的年齡: 35
// 使用receiver參數(shù)
const receiver = { age: 0 };
Reflect.set(obj, 'setAge', 20, receiver);
console.log('receiver的年齡:', receiver.age); // 輸出: receiver的年齡: 20
console.log('原對(duì)象的年齡:', obj.age); // 輸出: 原對(duì)象的年齡: 35（未改變）
// 凍結(jié)對(duì)象后設(shè)置屬性
const frozenObj = Object.freeze({ name: '凍結(jié)對(duì)象' });
const setFrozenResult = Reflect.set(frozenObj, 'name', '修改凍結(jié)對(duì)象');
console.log('設(shè)置凍結(jié)對(duì)象結(jié)果:', setFrozenResult); // 輸出: 設(shè)置凍結(jié)對(duì)象結(jié)果: false（操作失敗）
運(yùn)行結(jié)果：
設(shè)置姓名結(jié)果: true
設(shè)置后的姓名: 李四
設(shè)置地址結(jié)果: true
設(shè)置后的地址: 北京
設(shè)置年齡結(jié)果: true
設(shè)置后的年齡: 35
receiver的年齡: 20
原對(duì)象的年齡: 35
設(shè)置凍結(jié)對(duì)象結(jié)果: false
2.3 Reflect.has(target, propertyKey)
判斷對(duì)象是否具有某個(gè)屬性，相當(dāng)于propertyKey in target的函數(shù)式版本。
const obj = {
name: '張三',
age: 30
};
// 自有屬性
console.log('是否有name屬性:', Reflect.has(obj, 'name')); // 輸出: 是否有name屬性: true
console.log('是否有age屬性:', Reflect.has(obj, 'age')); // 輸出: 是否有age屬性: true
// 不存在的屬性
console.log('是否有address屬性:', Reflect.has(obj, 'address')); // 輸出: 是否有address屬性: false
// 繼承的屬性
console.log('是否有toString方法:', Reflect.has(obj, 'toString')); // 輸出: 是否有toString方法: true
// 數(shù)組示例
const arr = [1, 2, 3];
console.log('數(shù)組是否有索引0:', Reflect.has(arr, '0')); // 輸出: 數(shù)組是否有索引0: true
console.log('數(shù)組是否有l(wèi)ength屬性:', Reflect.has(arr, 'length')); // 輸出: 數(shù)組是否有l(wèi)ength屬性: true
// 使用Object.create創(chuàng)建的對(duì)象
const proto = { inherited: '繼承屬性' };
const objWithProto = Object.create(proto);
objWithProto.own = '自有屬性';
console.log('是否有自有屬性:', Reflect.has(objWithProto, 'own')); // 輸出: 是否有自有屬性: true
console.log('是否有繼承屬性:', Reflect.has(objWithProto, 'inherited')); // 輸出: 是否有繼承屬性: true
運(yùn)行結(jié)果：
是否有name屬性: true
是否有age屬性: true
是否有address屬性: false
是否有toString方法: true
數(shù)組是否有索引0: true
數(shù)組是否有l(wèi)ength屬性: true
是否有自有屬性: true
是否有繼承屬性: true
2.4 Reflect.deleteProperty(target, propertyKey)
刪除對(duì)象的屬性，相當(dāng)于delete target[propertyKey]的函數(shù)式版本。
const obj = {
name: '張三',
age: 30,
address: '北京'
};
// 刪除存在的屬性
const deleteAge = Reflect.deleteProperty(obj, 'age');
console.log('刪除age結(jié)果:', deleteAge); // 輸出: 刪除age結(jié)果: true
console.log('刪除后obj:', obj); // 輸出: 刪除后obj: { name: '張三', address: '北京' }
// 刪除不存在的屬性
const deleteGender = Reflect.deleteProperty(obj, 'gender');
console.log('刪除gender結(jié)果:', deleteGender); // 輸出: 刪除gender結(jié)果: true（刪除不存在的屬性返回true）
// 刪除數(shù)組元素
const arr = [10, 20, 30];
const deleteElement = Reflect.deleteProperty(arr, '1');
console.log('刪除數(shù)組元素結(jié)果:', deleteElement); // 輸出: 刪除數(shù)組元素結(jié)果: true
console.log('刪除后數(shù)組:', arr); // 輸出: 刪除后數(shù)組: [ 10, <1 empty item>, 30 ]
// 刪除不可配置的屬性
const nonConfigurableObj = {};
Object.defineProperty(nonConfigurableObj, 'id', {
value: 1,
configurable: false // 不可配置
});
const deleteNonConfigurable = Reflect.deleteProperty(nonConfigurableObj, 'id');
console.log('刪除不可配置屬性結(jié)果:', deleteNonConfigurable); // 輸出: 刪除不可配置屬性結(jié)果: false
運(yùn)行結(jié)果：
刪除age結(jié)果: true
刪除后obj: { name: '張三', address: '北京' }
刪除gender結(jié)果: true
刪除數(shù)組元素結(jié)果: true
刪除后數(shù)組: [ 10, <1 empty item>, 30 ]
刪除不可配置屬性結(jié)果: false
2.5 Reflect.defineProperty(target, propertyKey, attributes)
定義對(duì)象的屬性，相當(dāng)于Object.defineProperty，但返回布爾值表示成功與否。
const obj = {};
// 定義新屬性
const defineName = Reflect.defineProperty(obj, 'name', {
value: '張三',
writable: true,
configurable: true,
enumerable: true
});
console.log('定義name屬性結(jié)果:', defineName); // 輸出: 定義name屬性結(jié)果: true
console.log('定義后obj.name:', obj.name); // 輸出: 定義后obj.name: 張三
// 定義getter屬性
const defineGetter = Reflect.defineProperty(obj, 'upperName', {
get() {
return this.name.toUpperCase();
}
});
console.log('定義upperName getter結(jié)果:', defineGetter); // 輸出: 定義upperName getter結(jié)果: true
console.log('obj.upperName:', obj.upperName); // 輸出: obj.upperName: 張三
// 重復(fù)定義屬性（修改）
const redefineName = Reflect.defineProperty(obj, 'name', {
value: '李四'
});
console.log('重新定義name屬性結(jié)果:', redefineName); // 輸出: 重新定義name屬性結(jié)果: true
console.log('重新定義后obj.name:', obj.name); // 輸出: 重新定義后obj.name: 李四
// 定義不可配置的屬性
Reflect.defineProperty(obj, 'id', {
value: 1001,
configurable: false
});
// 嘗試刪除不可配置屬性
const deleteId = Reflect.deleteProperty(obj, 'id');
console.log('刪除不可配置屬性結(jié)果:', deleteId); // 輸出: 刪除不可配置屬性結(jié)果: false
// 嘗試修改不可配置屬性（失敗）
const redefineId = Reflect.defineProperty(obj, 'id', {
value: 1002
});
console.log('修改不可配置屬性結(jié)果:', redefineId); // 輸出: 修改不可配置屬性結(jié)果: false
console.log('obj.id:', obj.id); // 輸出: obj.id: 1001（未改變）
運(yùn)行結(jié)果：
定義name屬性結(jié)果: true
定義后obj.name: 張三
定義upperName getter結(jié)果: true
obj.upperName: 張三
重新定義name屬性結(jié)果: true
重新定義后obj.name: 李四
刪除不可配置屬性結(jié)果: false
修改不可配置屬性結(jié)果: false
obj.id: 1001
2.6 Reflect.construct(target, argumentsList [, newTarget])
創(chuàng)建構(gòu)造函數(shù)的實(shí)例，相當(dāng)于new target(...argumentsList)的函數(shù)式版本。
// 定義構(gòu)造函數(shù)
function Person(name, age) {
this.name = name;
this.age = age;
console.log('Person構(gòu)造函數(shù)被調(diào)用');
}
Person.prototype.sayHello = function() {
return `Hello, 我是${this.name}`;
};
// 使用Reflect.construct創(chuàng)建實(shí)例
const person = Reflect.construct(Person, ['張三', 30]);
console.log('創(chuàng)建的實(shí)例:', person); // 輸出: 創(chuàng)建的實(shí)例: Person { name: '張三', age: 30 }
console.log('實(shí)例方法調(diào)用:', person.sayHello()); // 輸出: 實(shí)例方法調(diào)用: Hello, 我是張三
console.log('是否是Person實(shí)例:', person instanceof Person); // 輸出: 是否是Person實(shí)例: true
// 使用newTarget參數(shù)（創(chuàng)建另一個(gè)類(lèi)型的實(shí)例）
function Student(name, age, grade) {
this.grade = grade;
console.log('Student構(gòu)造函數(shù)被調(diào)用');
}
Student.prototype.study = function() {
return `${this.name}在${this.grade}年級(jí)學(xué)習(xí)`;
};
// 使用Person構(gòu)造函數(shù)，但創(chuàng)建Student實(shí)例
const student = Reflect.construct(Person, ['李四', 15], Student);
console.log('創(chuàng)建的student實(shí)例:', student); // 輸出: 創(chuàng)建的student實(shí)例: Student { name: '李四', age: 15, grade: undefined }
console.log('是否是Student實(shí)例:', student instanceof Student); // 輸出: 是否是Student實(shí)例: true
console.log('是否是Person實(shí)例:', student instanceof Person); // 輸出: 是否是Person實(shí)例: false
// 注意: Person構(gòu)造函數(shù)被調(diào)用，但返回的是Student實(shí)例
// grade屬性未定義，因?yàn)镾tudent構(gòu)造函數(shù)沒(méi)有被調(diào)用
運(yùn)行結(jié)果：
Person構(gòu)造函數(shù)被調(diào)用
創(chuàng)建的實(shí)例: Person { name: '張三', age: 30 }
實(shí)例方法調(diào)用: Hello, 我是張三
是否是Person實(shí)例: true
Person構(gòu)造函數(shù)被調(diào)用
創(chuàng)建的student實(shí)例: Student { name: '李四', age: 15 }
是否是Student實(shí)例: true
是否是Person實(shí)例: false
2.7 Reflect.apply(target, thisArgument, argumentsList)
調(diào)用函數(shù)，相當(dāng)于Function.prototype.apply.call(target, thisArgument, argumentsList)的簡(jiǎn)化版本。
// 普通函數(shù)
function sum(a, b, c) {
console.log(`this值:`, this);
return a + b + c;
}
// 基本用法
const result1 = Reflect.apply(sum, null, [1, 2, 3]);
console.log('sum結(jié)果:', result1); // 輸出: sum結(jié)果: 6
// 指定this值
const obj = { name: '計(jì)算對(duì)象' };
const result2 = Reflect.apply(sum, obj, [4, 5, 6]);
console.log('指定this的sum結(jié)果:', result2); // 輸出: 指定this的sum結(jié)果: 15
// 調(diào)用對(duì)象方法
const person = {
name: '張三',
age: 30,
greet(greeting, punctuation) {
return `${greeting}, 我是${this.name}${punctuation}`;
}
};
const greeting = Reflect.apply(person.greet, person, ['你好', '!']);
console.log('調(diào)用對(duì)象方法結(jié)果:', greeting); // 輸出: 調(diào)用對(duì)象方法結(jié)果: 你好, 我是張三!
// 調(diào)用內(nèi)置函數(shù)
const numbers = [3, 1, 4, 1, 5, 9];
const sorted = Reflect.apply(Math.sort, numbers, []);
console.log('排序結(jié)果:', sorted); // 輸出: 排序結(jié)果: [ 1, 1, 3, 4, 5, 9 ]
console.log('原數(shù)組是否被修改:', numbers); // 輸出: 原數(shù)組是否被修改: [ 1, 1, 3, 4, 5, 9 ]（sort會(huì)修改原數(shù)組）
// 調(diào)用匿名函數(shù)
const result3 = Reflect.apply(function(a, b) {
return a * b;
}, null, [5, 6]);
console.log('調(diào)用匿名函數(shù)結(jié)果:', result3); // 輸出: 調(diào)用匿名函數(shù)結(jié)果: 30
運(yùn)行結(jié)果：
this值: null
sum結(jié)果: 6
this值: { name: '計(jì)算對(duì)象' }
指定this的sum結(jié)果: 15
調(diào)用對(duì)象方法結(jié)果: 你好, 我是張三!
排序結(jié)果: [ 1, 1, 3, 4, 5, 9 ]
原數(shù)組是否被修改: [ 1, 1, 3, 4, 5, 9 ]
調(diào)用匿名函數(shù)結(jié)果: 30
三、Reflect在Proxy中的應(yīng)用
Reflect的一個(gè)主要設(shè)計(jì)目的就是與Proxy配合使用。Proxy的每個(gè)陷阱(trap)都對(duì)應(yīng)一個(gè)Reflect方法，它們的參數(shù)完全一致，使得在Proxy中可以輕松地調(diào)用默認(rèn)行為。
3.1 基本用法：在Proxy中調(diào)用默認(rèn)行為
// 創(chuàng)建一個(gè)普通對(duì)象
const target = {
name: '張三',
age: 30,
address: '北京'
};
// 創(chuàng)建Proxy
const proxy = new Proxy(target, {
// 獲取屬性值
get(target, prop, receiver) {
console.log(`獲取屬性: ${prop}`);
// 使用Reflect調(diào)用默認(rèn)行為
return Reflect.get(target, prop, receiver);
},
// 設(shè)置屬性值
set(target, prop, value, receiver) {
console.log(`設(shè)置屬性: ${prop} = ${value}`);
// 使用Reflect調(diào)用默認(rèn)行為并返回結(jié)果
return Reflect.set(target, prop, value, receiver);
},
// 刪除屬性
deleteProperty(target, prop) {
console.log(`刪除屬性: ${prop}`);
// 使用Reflect調(diào)用默認(rèn)行為并返回結(jié)果
return Reflect.deleteProperty(target, prop);
},
// 判斷屬性是否存在
has(target, prop) {
console.log(`判斷屬性是否存在: ${prop}`);
// 使用Reflect調(diào)用默認(rèn)行為并返回結(jié)果
return Reflect.has(target, prop);
}
});
// 使用Proxy
console.log('姓名:', proxy.name); // 獲取屬性
proxy.age = 31; // 設(shè)置屬性
console.log('年齡:', proxy.age);
console.log('是否有address屬性:', 'address' in proxy); // 判斷屬性是否存在
delete proxy.address; // 刪除屬性
console.log('刪除后是否有address屬性:', 'address' in proxy);
運(yùn)行結(jié)果：
獲取屬性: name
姓名: 張三
設(shè)置屬性: age = 31
獲取屬性: age
年齡: 31
判斷屬性是否存在: address
是否有address屬性: true
刪除屬性: address
判斷屬性是否存在: address
刪除后是否有address屬性: false
3.2 高級(jí)應(yīng)用：數(shù)據(jù)驗(yàn)證與日志記錄
// 創(chuàng)建一個(gè)用戶(hù)對(duì)象
const user = {
name: '張三',
age: 30,
email: 'zhangsan@example.com'
};
// 創(chuàng)建帶驗(yàn)證和日志的Proxy
const validatedUser = new Proxy(user, {
get(target, prop, receiver) {
console.log(`[LOG] 獲取屬性: ${prop}`);
// 檢查屬性是否存在
if (!Reflect.has(target, prop)) {
console.warn(`[WARN] 屬性 ${prop} 不存在`);
return undefined;
}
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
console.log(`[LOG] 設(shè)置屬性: ${prop} = ${value}`);
// 數(shù)據(jù)驗(yàn)證
switch (prop) {
case 'age':
if (typeof value !== 'number' || value < 0 || value > 120) {
console.error(`[ERROR] 無(wú)效的年齡值: ${value}`);
return false; // 設(shè)置失敗
}
break;
case 'email':
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
console.error(`[ERROR] 無(wú)效的郵箱格式: ${value}`);
return false; // 設(shè)置失敗
}
break;
// 可以添加更多屬性的驗(yàn)證規(guī)則
}
// 驗(yàn)證通過(guò)，設(shè)置屬性
return Reflect.set(target, prop, value, receiver);
},
deleteProperty(target, prop) {
console.log(`[LOG] 嘗試刪除屬性: ${prop}`);
// 保護(hù)核心屬性不被刪除
const protectedProps = ['name'];
if (protectedProps.includes(prop)) {
console.error(`[ERROR] 不能刪除核心屬性: ${prop}`);
return false; // 刪除失敗
}
return Reflect.deleteProperty(target, prop);
}
});
// 使用代理對(duì)象
console.log('姓名:', validatedUser.name);
console.log('不存在的屬性:', validatedUser.address);
// 設(shè)置有效屬性
validatedUser.age = 31;
validatedUser.email = 'new-email@example.com';
console.log('更新后的年齡:', validatedUser.age);
console.log('更新后的郵箱:', validatedUser.email);
// 設(shè)置無(wú)效屬性
validatedUser.age = 150; // 無(wú)效的年齡
validatedUser.email = 'invalid-email'; // 無(wú)效的郵箱格式
// 嘗試刪除屬性
delete validatedUser.email; // 可以刪除
console.log('刪除后郵箱是否存在:', 'email' in validatedUser);
delete validatedUser.name; // 不能刪除核心屬性
運(yùn)行結(jié)果：
[LOG] 獲取屬性: name
姓名: 張三
[LOG] 獲取屬性: address
[WARN] 屬性 address 不存在
不存在的屬性: undefined
[LOG] 設(shè)置屬性: age = 31
[LOG] 設(shè)置屬性: email = new-email@example.com
[LOG] 獲取屬性: age
更新后的年齡: 31
[LOG] 獲取屬性: email
更新后的郵箱: new-email@example.com
[LOG] 設(shè)置屬性: age = 150
[ERROR] 無(wú)效的年齡值: 150
[LOG] 設(shè)置屬性: email = invalid-email
[ERROR] 無(wú)效的郵箱格式: invalid-email
[LOG] 嘗試刪除屬性: email
[LOG] 嘗試刪除屬性: name
[ERROR] 不能刪除核心屬性: name
[LOG] 判斷屬性是否存在: email
刪除后郵箱是否存在: false
3.3 實(shí)現(xiàn)觀察者模式
// 觀察者類(lèi)
class Observer {
constructor() {
this.observers = [];
}
// 添加觀察者
subscribe(callback) {
this.observers.push(callback);
}
// 通知所有觀察者
notify(data) {
this.observers.forEach(callback => callback(data));
}
}
// 創(chuàng)建觀察者實(shí)例
const observer = new Observer();
// 添加觀察者
observer.subscribe((data) => {
console.log('觀察者1收到變化:', data);
});
observer.subscribe((data) => {
console.log('觀察者2收到變化:', data);
});
// 創(chuàng)建被觀察對(duì)象
const target = {
name: '張三',
age: 30
};
// 創(chuàng)建Proxy，當(dāng)屬性變化時(shí)通知觀察者
const observableTarget = new Proxy(target, {
set(target, prop, value, receiver) {
const oldValue = Reflect.get(target, prop, receiver);
// 如果值沒(méi)有變化，不通知
if (oldValue === value) {
return true;
}
// 設(shè)置新值
const result = Reflect.set(target, prop, value, receiver);
// 通知觀察者
if (result) {
observer.notify({
prop,
oldValue,
newValue: value,
timestamp: new Date()
});
}
return result;
}
});
// 修改屬性，觸發(fā)通知
console.log('修改name屬性:');
observableTarget.name = '李四';
console.log('\n修改age屬性:');
observableTarget.age = 31;
console.log('\n設(shè)置相同的值:');
observableTarget.age = 31; // 不會(huì)觸發(fā)通知
運(yùn)行結(jié)果：
修改name屬性:
觀察者1收到變化: { prop: 'name', oldValue: '張三', newValue: '李四', timestamp: 2023-11-15T08:30:00.000Z }
觀察者2收到變化: { prop: 'name', oldValue: '張三', newValue: '李四', timestamp: 2023-11-15T08:30:00.000Z }修改age屬性:
觀察者1收到變化: { prop: 'age', oldValue: 30, newValue: 31, timestamp: 2023-11-15T08:30:01.000Z }
觀察者2收到變化: { prop: 'age', oldValue: 30, newValue: 31, timestamp: 2023-11-15T08:30:01.000Z }設(shè)置相同的值:
四、Reflect其他常用方法
4.1 Reflect.getOwnPropertyDescriptor(target, propertyKey)
獲取對(duì)象自有屬性的描述符，類(lèi)似于Object.getOwnPropertyDescriptor。
const obj = {
name: '張三',
age: 30
};
// 定義getter屬性
Object.defineProperty(obj, 'fullInfo', {
get() {
return `${this.name}, ${this.age}歲`;
},
enumerable: false
});
// 獲取普通屬性描述符
const nameDesc = Reflect.getOwnPropertyDescriptor(obj, 'name');
console.log('name屬性描述符:', nameDesc);
// 獲取getter屬性描述符
const infoDesc = Reflect.getOwnPropertyDescriptor(obj, 'fullInfo');
console.log('fullInfo屬性描述符:', infoDesc);
// 獲取不存在的屬性描述符
const addressDesc = Reflect.getOwnPropertyDescriptor(obj, 'address');
console.log('address屬性描述符:', addressDesc);
// 數(shù)組示例
const arr = [1, 2, 3];
const arrDesc = Reflect.getOwnPropertyDescriptor(arr, 'length');
console.log('數(shù)組length屬性描述符:', arrDesc);
運(yùn)行結(jié)果：
name屬性描述符: { value: '張三', writable: true, enumerable: true, configurable: true }
fullInfo屬性描述符: { get: [Function: get], set: undefined, enumerable: false, configurable: false }
address屬性描述符: undefined
數(shù)組length屬性描述符: { value: 3, writable: true, enumerable: false, configurable: false }
4.2 Reflect.getPrototypeOf(target) 與 Reflect.setPrototypeOf(target, prototype)
獲取和設(shè)置對(duì)象的原型，相當(dāng)于Object.getPrototypeOf和Object.setPrototypeOf。
// 定義原型對(duì)象
const animalProto = {
eat() {
return `${this.name}在吃東西`;
}
};
// 定義對(duì)象
const cat = {
name: '小貓'
};
// 獲取原型
let proto = Reflect.getPrototypeOf(cat);
console.log('默認(rèn)原型:', proto === Object.prototype); // 輸出: 默認(rèn)原型: true
// 設(shè)置原型
const setResult = Reflect.setPrototypeOf(cat, animalProto);
console.log('設(shè)置原型結(jié)果:', setResult); // 輸出: 設(shè)置原型結(jié)果: true
// 獲取新原型
proto = Reflect.getPrototypeOf(cat);
console.log('新原型:', proto === animalProto); // 輸出: 新原型: true
// 使用原型方法
console.log('調(diào)用原型方法:', cat.eat()); // 輸出: 調(diào)用原型方法: 小貓?jiān)诔詵|西
// 嘗試設(shè)置不可擴(kuò)展對(duì)象的原型
const obj = Object.preventExtensions({});
const setProtoResult = Reflect.setPrototypeOf(obj, animalProto);
console.log('設(shè)置不可擴(kuò)展對(duì)象原型結(jié)果:', setProtoResult); // 輸出: 設(shè)置不可擴(kuò)展對(duì)象原型結(jié)果: false
運(yùn)行結(jié)果：
默認(rèn)原型: true
設(shè)置原型結(jié)果: true
新原型: true
調(diào)用原型方法: 小貓?jiān)诔詵|西
設(shè)置不可擴(kuò)展對(duì)象原型結(jié)果: false
4.3 Reflect.isExtensible(target) 與 Reflect.preventExtensions(target)
判斷對(duì)象是否可擴(kuò)展以及阻止對(duì)象擴(kuò)展，相當(dāng)于Object.isExtensible和Object.preventExtensions。
// 創(chuàng)建普通對(duì)象
const obj = { name: '測(cè)試對(duì)象' };
// 判斷是否可擴(kuò)展
console.log('初始是否可擴(kuò)展:', Reflect.isExtensible(obj)); // 輸出: 初始是否可擴(kuò)展: true
// 添加屬性
obj.age = 30;
console.log('添加屬性后:', obj); // 輸出: 添加屬性后: { name: '測(cè)試對(duì)象', age: 30 }
// 阻止擴(kuò)展
const preventResult = Reflect.preventExtensions(obj);
console.log('阻止擴(kuò)展結(jié)果:', preventResult); // 輸出: 阻止擴(kuò)展結(jié)果: true
// 再次判斷是否可擴(kuò)展
console.log('阻止后是否可擴(kuò)展:', Reflect.isExtensible(obj)); // 輸出: 阻止后是否可擴(kuò)展: false
// 嘗試添加新屬性（失敗）
obj.address = '北京';
console.log('嘗試添加新屬性后:', obj); // 輸出: 嘗試添加新屬性后: { name: '測(cè)試對(duì)象', age: 30 }（address屬性未添加）
// 密封對(duì)象和凍結(jié)對(duì)象也是不可擴(kuò)展的
const sealedObj = Object.seal({});
console.log('密封對(duì)象是否可擴(kuò)展:', Reflect.isExtensible(sealedObj)); // 輸出: 密封對(duì)象是否可擴(kuò)展: false
const frozenObj = Object.freeze({});
console.log('凍結(jié)對(duì)象是否可擴(kuò)展:', Reflect.isExtensible(frozenObj)); // 輸出: 凍結(jié)對(duì)象是否可擴(kuò)展: false
運(yùn)行結(jié)果：
初始是否可擴(kuò)展: true
添加屬性后: { name: '測(cè)試對(duì)象', age: 30 }
阻止擴(kuò)展結(jié)果: true
阻止后是否可擴(kuò)展: false
嘗試添加新屬性后: { name: '測(cè)試對(duì)象', age: 30 }
密封對(duì)象是否可擴(kuò)展: false
凍結(jié)對(duì)象是否可擴(kuò)展: false
4.4 Reflect.ownKeys(target)
返回對(duì)象的所有自有屬性鍵，相當(dāng)于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。
// 定義symbol屬性
const symbolProp = Symbol('symbol屬性');
// 創(chuàng)建對(duì)象
const obj = {
name: '張三',
age: 30
};
obj[symbolProp] = 'symbol值'; // 添加symbol屬性
Object.defineProperty(obj, 'id', { // 添加不可枚舉屬性
value: 1001,
enumerable: false
});
// 獲取所有自有鍵
const keys = Reflect.ownKeys(obj);
console.log('所有自有鍵:', keys); // 輸出: 所有自有鍵: [ 'name', 'age', 'id', Symbol(symbol屬性) ]
// 對(duì)比Object.keys（只返回可枚舉的自有字符串鍵）
const objectKeys = Object.keys(obj);
console.log('Object.keys結(jié)果:', objectKeys); // 輸出: Object.keys結(jié)果: [ 'name', 'age' ]
// 數(shù)組示例
const arr = [10, 20, 30];
console.log('數(shù)組的自有鍵:', Reflect.ownKeys(arr)); // 輸出: 數(shù)組的自有鍵: [ '0', '1', '2', 'length' ]
// 不可枚舉屬性也會(huì)被返回
console.log('是否包含不可枚舉屬性id:', keys.includes('id')); // 輸出: 是否包含不可枚舉屬性id: true
// Symbol屬性也會(huì)被返回
console.log('是否包含symbol屬性:', keys.includes(symbolProp)); // 輸出: 是否包含symbol屬性: true
運(yùn)行結(jié)果：
所有自有鍵: [ 'name', 'age', 'id', Symbol(symbol屬性) ]
Object.keys結(jié)果: [ 'name', 'age' ]
數(shù)組的自有鍵: [ '0', '1', '2', 'length' ]
是否包含不可枚舉屬性id: true
是否包含symbol屬性: true
五、Reflect實(shí)際應(yīng)用場(chǎng)景
5.1 安全地操作對(duì)象屬性
Reflect提供了更安全的對(duì)象操作方式，特別是在處理可能失敗的操作時(shí)。
// 安全地獲取深層屬性
function getDeepProperty(obj, path) {
return path.split('.').reduce((current, prop) => {
if (current === null || current === undefined) return undefined;
return Reflect.get(current, prop);
}, obj);
}
// 安全地設(shè)置深層屬性
function setDeepProperty(obj, path, value) {
const parts = path.split('.');
const lastProp = parts.pop();
const target = parts.reduce((current, prop) => {
// 如果中間屬性不存在，創(chuàng)建一個(gè)空對(duì)象
if (current === null || current === undefined) {
current = {};
}
// 如果當(dāng)前屬性不是對(duì)象，無(wú)法設(shè)置深層屬性
if (typeof current !== 'object') {
return undefined;
}
return Reflect.get(current, prop);
}, obj);
if (target === undefined) return false;
return Reflect.set(target, lastProp, value);
}
// 測(cè)試對(duì)象
const data = {
user: {
name: '張三',
address: {
city: '北京',
street: '科技路'
}
},
scores: [90, 85, 95]
};
// 安全獲取屬性
console.log('獲取存在的深層屬性:', getDeepProperty(data, 'user.address.city')); // 輸出: 獲取存在的深層屬性: 北京
console.log('獲取不存在的屬性:', getDeepProperty(data, 'user.address.zipcode')); // 輸出: 獲取不存在的屬性: undefined
console.log('獲取數(shù)組元素:', getDeepProperty(data, 'scores.1')); // 輸出: 獲取數(shù)組元素: 85
// 安全設(shè)置屬性
console.log('設(shè)置存在的深層屬性:', setDeepProperty(data, 'user.address.street', '創(chuàng)新路')); // 輸出: 設(shè)置存在的深層屬性: true
console.log('設(shè)置后的值:', data.user.address.street); // 輸出: 設(shè)置后的值: 創(chuàng)新路
console.log('設(shè)置不存在的深層屬性:', setDeepProperty(data, 'user.contact.phone', '123456789')); // 輸出: 設(shè)置不存在的深層屬性: true
console.log('設(shè)置后的新屬性:', data.user.contact.phone); // 輸出: 設(shè)置后的新屬性: 123456789
console.log('設(shè)置到非對(duì)象上:', setDeepProperty(data, 'scores.0.name', '語(yǔ)文')); // 輸出: 設(shè)置到非對(duì)象上: false
運(yùn)行結(jié)果：
獲取存在的深層屬性: 北京
獲取不存在的屬性: undefined
獲取數(shù)組元素: 85
設(shè)置存在的深層屬性: true
設(shè)置后的值: 創(chuàng)新路
設(shè)置不存在的深層屬性: true
設(shè)置后的新屬性: 123456789
設(shè)置到非對(duì)象上: false
5.2 實(shí)現(xiàn)通用的對(duì)象操作函數(shù)
利用Reflect的函數(shù)式API，可以創(chuàng)建通用的對(duì)象操作工具函數(shù)。
// 通用對(duì)象復(fù)制函數(shù)
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 處理日期
if (obj instanceof Date) {
return new Date(obj);
}
// 處理數(shù)組
if (obj instanceof Array) {
return obj.map(item => deepClone(item));
}
// 創(chuàng)建新對(duì)象，復(fù)制原型
const newObj = Object.create(Reflect.getPrototypeOf(obj));
// 復(fù)制所有自有屬性（包括不可枚舉和Symbol屬性）
const keys = Reflect.ownKeys(obj);
for (const key of keys) {
const desc = Reflect.getOwnPropertyDescriptor(obj, key);
// 如果是訪(fǎng)問(wèn)器屬性
if (desc.get || desc.set) {
Reflect.defineProperty(newObj, key, {
get: desc.get,
set: desc.set,
enumerable: desc.enumerable,
configurable: desc.configurable
});
} else {
// 遞歸復(fù)制值
newObj[key] = deepClone(desc.value);
}
}
return newObj;
}
// 測(cè)試對(duì)象
const original = {
name: '測(cè)試對(duì)象',
age: 30,
[Symbol('secret')]: '秘密屬性',
get fullInfo() {
return `${this.name}, ${this.age}歲`;
},
hobbies: ['閱讀', '運(yùn)動(dòng)']
};
// 添加不可枚舉屬性
Object.defineProperty(original, 'id', {
value: 1001,
enumerable: false
});
// 克隆對(duì)象
const cloned = deepClone(original);
// 驗(yàn)證克隆結(jié)果
console.log('原始對(duì)象:', original);
console.log('克隆對(duì)象:', cloned);
console.log('克隆對(duì)象fullInfo:', cloned.fullInfo);
console.log('克隆對(duì)象secret屬性:', cloned[Symbol('secret')]);
console.log('克隆對(duì)象id屬性:', cloned.id);
console.log('原型是否相同:', Reflect.getPrototypeOf(original) === Reflect.getPrototypeOf(cloned));
console.log('是否是深克隆:', original.hobbies !== cloned.hobbies); // 數(shù)組應(yīng)該是新數(shù)組
運(yùn)行結(jié)果：
原始對(duì)象: { name: '測(cè)試對(duì)象', age: 30, hobbies: [ '閱讀', '運(yùn)動(dòng)' ] }
克隆對(duì)象: { name: '測(cè)試對(duì)象', age: 30, hobbies: [ '閱讀', '運(yùn)動(dòng)' ] }
克隆對(duì)象fullInfo: 測(cè)試對(duì)象, 30歲
克隆對(duì)象secret屬性: 秘密屬性
克隆對(duì)象id屬性: 1001
原型是否相同: true
是否是深克隆: true
5.3 與Class配合使用
Reflect可以與Class結(jié)合，實(shí)現(xiàn)更靈活的構(gòu)造函數(shù)和方法調(diào)用。
// 定義一個(gè)基礎(chǔ)類(lèi)
class BaseModel {
constructor(data) {
// 使用Reflect設(shè)置屬性
if (data) {
for (const [key, value] of Object.entries(data)) {
Reflect.set(this, key, value);
}
}
}
// 通用的保存方法
save() {
const className = this.constructor.name;
const id = Reflect.get(this, 'id') || Date.now();
Reflect.set(this, 'id', id);
// 模擬保存到數(shù)據(jù)庫(kù)
console.log(`[${className}] 保存數(shù)據(jù):`, this);
return { success: true, id };
}
// 靜態(tài)方法：通過(guò)ID加載
static load(id) {
const className = this.name;
console.log(`[${className}] 加載ID為${id}的數(shù)據(jù)`);
// 模擬從數(shù)據(jù)庫(kù)加載
return new this({ id, loadedAt: new Date() });
}
}
// 用戶(hù)模型
class User extends BaseModel {
constructor(data) {
super(data);
// 設(shè)置默認(rèn)角色
if (!Reflect.has(this, 'role')) {
Reflect.set(this, 'role', 'user');
}
}
// 用戶(hù)登錄方法
login(password) {
console.log(`用戶(hù)${this.username}嘗試登錄`);
// 簡(jiǎn)單的密碼驗(yàn)證
return Reflect.get(this, 'password') === password;
}
}
// 產(chǎn)品模型
class Product extends BaseModel {
constructor(data) {
super(data);
// 設(shè)置默認(rèn)價(jià)格
if (!Reflect.has(this, 'price')) {
Reflect.set(this, 'price', 0);
}
}
// 獲取折扣價(jià)格
getDiscountPrice(discount) {
const price = Reflect.get(this, 'price');
return price * (1 - discount);
}
}
// 使用User模型
const user = new User({
username: 'zhangsan',
password: '123456',
email: 'zhangsan@example.com'
});
console.log('用戶(hù)角色:', user.role); // 使用默認(rèn)角色
console.log('登錄結(jié)果:', user.login('123456')); // 登錄成功
const saveResult = user.save();
console.log('保存結(jié)果:', saveResult);
// 使用Product模型
const product = new Product({
name: 'Vue教程',
price: 89
});
console.log('折扣價(jià)格:', product.getDiscountPrice(0.1)); // 9折
product.save();
// 加載數(shù)據(jù)
const loadedUser = User.load(saveResult.id);
console.log('加載的用戶(hù):', loadedUser);
運(yùn)行結(jié)果：
用戶(hù)角色: user
用戶(hù)zhangsan嘗試登錄
登錄結(jié)果: true
[User] 保存數(shù)據(jù): User { username: 'zhangsan', password: '123456', email: 'zhangsan@example.com', role: 'user', id: 1636945800000 }
保存結(jié)果: { success: true, id: 1636945800000 }
折扣價(jià)格: 80.1
[Product] 保存數(shù)據(jù): Product { name: 'Vue教程', price: 89, id: 1636945800001 }
[User] 加載ID為1636945800000的數(shù)據(jù)
加載的用戶(hù): User { id: 1636945800000, loadedAt: 2023-11-15T08:30:00.000Z, role: 'user' }
六、Reflect使用注意事項(xiàng)與最佳實(shí)踐
6.1 注意事項(xiàng)
- Reflect不是構(gòu)造函數(shù)：不能使用new操作符調(diào)用Reflect，也不能將其作為函數(shù)調(diào)用Reflect本身
// 錯(cuò)誤用法 new Reflect(); // TypeError: Reflect is not a constructor Reflect(); // TypeError: Reflect is not a function
- 所有方法都是靜態(tài)的：Reflect的所有方法都必須通過(guò)Reflect對(duì)象調(diào)用
// 正確用法 Reflect.get(obj, 'prop'); // 錯(cuò)誤用法 const r = Reflect; r.get(obj, 'prop'); // 雖然可以工作，但不推薦這樣使用
- 參數(shù)驗(yàn)證嚴(yán)格：Reflect方法對(duì)參數(shù)類(lèi)型有嚴(yán)格要求，傳入錯(cuò)誤類(lèi)型會(huì)拋出TypeError
// 錯(cuò)誤示例 Reflect.get(null, 'prop'); // TypeError: Reflect.get called on non-object Reflect.set(undefined, 'prop', 1); // TypeError: Reflect.set called on non-object
- 與Proxy陷阱的參數(shù)一致性：Reflect方法的參數(shù)與Proxy陷阱的參數(shù)完全一致，這是刻意設(shè)計(jì)的
const proxy = new Proxy(obj, {
get(target, prop, receiver) {
// 參數(shù)與Reflect.get完全一致
return Reflect.get(target, prop, receiver);
}
});
6.2 最佳實(shí)踐
優(yōu)先使用Reflect代替Object的某些方法：
- 當(dāng)需要獲取操作結(jié)果的布爾值時(shí)，使用Reflect方法
- 當(dāng)在Proxy陷阱中需要調(diào)用默認(rèn)行為時(shí)，使用Reflect方法
使用Reflect.has代替in操作符：
// 推薦 if (Reflect.has(obj, 'prop')) { ... } // 不推薦 if ('prop' in obj) { ... }使用Reflect.deleteProperty代替delete操作符：
// 推薦 if (Reflect.deleteProperty(obj, 'prop')) { ... } // 不推薦 if (delete obj.prop) { ... }使用Reflect.construct代替new操作符：
// 推薦 const instance = Reflect.construct(MyClass, args); // 不推薦 const instance = new MyClass(...args);
使用Reflect.apply調(diào)用函數(shù)：
// 推薦 const result = Reflect.apply(func, thisArg, args); // 不推薦 const result = func.apply(thisArg, args);
在Proxy中始終使用Reflect方法調(diào)用默認(rèn)行為：
const proxy = new Proxy(obj, { get(target, prop, receiver) { // 記錄日志等自定義操作 console.log(`get: ${prop}`); // 調(diào)用默認(rèn)行為 return Reflect.get(target, prop, receiver); } });
七、總結(jié)
7.1 Reflect核心方法總結(jié)
| 方法 | 作用 | 對(duì)應(yīng)操作/Object方法 |
|---|---|---|
| Reflect.get(target, prop, receiver) | 獲取屬性值 | target[prop] |
| Reflect.set(target, prop, value, receiver) | 設(shè)置屬性值 | target[prop] = value |
| Reflect.has(target, prop) | 判斷屬性是否存在 | prop in target |
| Reflect.deleteProperty(target, prop) | 刪除屬性 | delete target[prop] |
| Reflect.defineProperty(target, prop, desc) | 定義屬性 | Object.defineProperty |
| Reflect.getOwnPropertyDescriptor(target, prop) | 獲取屬性描述符 | Object.getOwnPropertyDescriptor |
| Reflect.ownKeys(target) | 獲取所有自有屬性鍵 | Object.getOwnPropertyNames + Object.getOwnPropertySymbols |
| Reflect.getPrototypeOf(target) | 獲取原型 | Object.getPrototypeOf |
| Reflect.setPrototypeOf(target, proto) | 設(shè)置原型 | Object.setPrototypeOf |
| Reflect.isExtensible(target) | 判斷是否可擴(kuò)展 | Object.isExtensible |
| Reflect.preventExtensions(target) | 阻止擴(kuò)展 | Object.preventExtensions |
| Reflect.construct(target, args, newTarget) | 創(chuàng)建實(shí)例 | new target(…args) |
| Reflect.apply(target, thisArg, args) | 調(diào)用函數(shù) | target.apply(thisArg, args) |
7.2 Reflect的優(yōu)勢(shì)
函數(shù)式編程接口：將對(duì)象操作統(tǒng)一為函數(shù)調(diào)用，更符合函數(shù)式編程風(fēng)格
更合理的返回值：操作成功返回true，失敗返回false，而非拋出錯(cuò)誤
更好的錯(cuò)誤處理：避免使用try-catch來(lái)捕獲對(duì)象操作錯(cuò)誤
與Proxy完美配合：參數(shù)完全對(duì)應(yīng)，便于在Proxy中調(diào)用默認(rèn)行為
完整的屬性操作覆蓋：提供了操作對(duì)象屬性的全方位API
7.3 何時(shí)使用Reflect
使用Proxy時(shí)：始終使用Reflect方法調(diào)用默認(rèn)行為
需要安全地操作對(duì)象屬性時(shí)：特別是在不確定屬性是否存在或?qū)ο笫欠窨蓴U(kuò)展時(shí)
需要函數(shù)式操作對(duì)象時(shí)：在函數(shù)式編程風(fēng)格中更適用
需要操作Symbol屬性或不可枚舉屬性時(shí)：Reflect.ownKeys提供了統(tǒng)一的解決方案
需要獲取操作結(jié)果狀態(tài)時(shí)：Reflect方法返回布爾值表示操作成功與否
Reflect是JavaScript中一個(gè)強(qiáng)大而優(yōu)雅的內(nèi)置對(duì)象，它提供了統(tǒng)一、安全、函數(shù)式的對(duì)象操作方式。雖然在日常開(kāi)發(fā)中可能不會(huì)頻繁直接使用Reflect，但理解它的工作原理和應(yīng)用場(chǎng)景對(duì)于編寫(xiě)更健壯、更靈活的JavaScript代碼，特別是在使用Proxy進(jìn)行元編程時(shí)，至關(guān)重要。
隨著JavaScript語(yǔ)言的不斷發(fā)展，Reflect的重要性將越來(lái)越凸顯，成為現(xiàn)代JavaScript開(kāi)發(fā)中不可或缺的工具之一。
總結(jié)
到此這篇關(guān)于JavaScript中Reflect的常用方法及注意事項(xiàng)的文章就介紹到這了,更多相關(guān)JS中Reflect詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript IE中的DOM ready應(yīng)用技巧
當(dāng)我們想在頁(yè)面加載之后執(zhí)行某個(gè)函數(shù)，肯定會(huì)想到onload了 但onload在瀏覽器看來(lái)，就是頁(yè)面上的東西全部都加載完畢后才能發(fā)生，但那就為時(shí)已晚了。2008-07-07
JS?TypeScript的Map對(duì)象及聯(lián)合類(lèi)型實(shí)戰(zhàn)
這篇文章主要介紹了JS?TypeScript的Map對(duì)象及聯(lián)合類(lèi)型實(shí)戰(zhàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
下面小編就為大家?guī)?lái)一篇js中最容易被忽視的事件問(wèn)題大總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-05-05
typeScript中數(shù)組類(lèi)型定義及應(yīng)用詳解
相信大家應(yīng)該都知道ts只允許數(shù)組中包括一種數(shù)據(jù)類(lèi)型的值,下面這篇文章主要給大家介紹了關(guān)于typeScript中數(shù)組類(lèi)型定義及應(yīng)用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，感興趣的朋友可以參考與一下2022-06-06
快速解決FusionCharts聯(lián)動(dòng)的中文亂碼問(wèn)題
這篇文章主要介紹了如何解決FusionCharts聯(lián)動(dòng)的中文亂碼問(wèn)題。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
js獲取元素的標(biāo)簽名實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js獲取元素的標(biāo)簽名實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
微信小程序獲取用戶(hù)手機(jī)號(hào)碼的詳細(xì)步驟
最近改了一個(gè)公司項(xiàng)目,新增加了一個(gè)獲取用戶(hù)手機(jī)號(hào)功能,里面用到了關(guān)于獲取用戶(hù)信息和用戶(hù)手機(jī)號(hào)的功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶(hù)手機(jī)號(hào)碼的相關(guān)資料,需要的朋友可以參考下2022-07-07
ES6頂層對(duì)象、global對(duì)象實(shí)例分析
這篇文章主要介紹了ES6頂層對(duì)象、global對(duì)象,結(jié)合實(shí)例形式分析了ES6頂層對(duì)象與global對(duì)象的概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06