目錄
類
?繼承
ES5 如何繼承
ES6繼承
Symbol
用途
可以產(chǎn)生唯一的值，獨(dú)一無(wú)二的值
解決命名沖突
getOwnPropertySymbols()
?作為全局注冊(cè)表 緩存 ?Symbol.for()
?消除魔術(shù)字符串
?模版字符串
類
在javascript語(yǔ)言中，生成實(shí)例對(duì)象使用構(gòu)造函數(shù)；ES6提供了類Class這個(gè)概念，作為對(duì)象的模板。定義一個(gè)類通過(guò)class關(guān)鍵字，ES6的類可以看成是構(gòu)造函數(shù)的另一種寫法。
class Person{
constructor(name,age,gender){
// 類構(gòu)造器中屬性和方法是實(shí)例私有屬性和私有方法
this.name = name;
this.age = age;
this.gender = gender;
}
// 實(shí)例公共方法 類似于存放在Person類原型對(duì)象中
sayName(){
console.log(this.name);
}
test = 'hello'; //實(shí)例公共屬性
friends = []; //實(shí)例私有屬性
// 類靜態(tài)屬性和靜態(tài)方法
static personAttr = '類的靜態(tài)屬性';
static personMethod = function(){
console.log('類靜態(tài)方法this指向類本身');
console.log(this,this.personAttr,this.test,this.friends);
}
}
let p1 = new Person('可樂(lè)',12,'male');
let p2 = new Person();
console.log(p1.test,p2.test);
console.log(p1.test === p2.test);
p1.friends.push('tom');
console.log(p1.friends,p2.friends);
console.log(p1.friends === p2.friends);
Person.personMethod();
?繼承
ES5 如何繼承
實(shí)例使用屬性和方法
? 1.從實(shí)例對(duì)象本身查找屬性或者方法
? 2.如果實(shí)例沒(méi)有，從構(gòu)造函數(shù)的原型對(duì)象中找
? 3.如果還沒(méi)有，從父構(gòu)造函數(shù)的原型對(duì)象中找
/**
* es5 繼承
* 經(jīng)典繼承 原型鏈繼承
*/
// function Animal(name,age,length,weight){
// this.name = name;
// this.age = age;
// this.length = length;
// this.weight = weight;
// }
// Animal.prototype = {
// constructor:Animal,
// sayType(){
// console.log(this.type)
// }
// }
// function Dog(name,age,length,weight,type){
// // 繼承父構(gòu)造函數(shù)屬性 借用構(gòu)造函數(shù)繼承 經(jīng)典繼承
// Animal.call(this,name,age,length,weight);
// this.type = type;
// }
// // 原型鏈繼承 子類得原型對(duì)象指向父類得實(shí)例
// Dog.prototype = new Animal();
// Dog.prototype.constructor = Dog;
// let d1 = new Dog('可樂(lè)',12,'40cm','10kg','狗');
// d1.sayType();
// console.log(d1);更詳細(xì)的ES5繼承見(jiàn)面向?qū)ο笾畡?chuàng)建對(duì)象模式和繼承模式_學(xué)前端的狗頭蘇丹的博客-CSDN博客
ES6繼承
class可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，子類可以沒(méi)有構(gòu)造函數(shù)，系統(tǒng)會(huì)默認(rèn)分配。子類提供了構(gòu)造函數(shù)則必須要顯式調(diào)用super。super函數(shù)類似于借用構(gòu)造函數(shù)。類似于Animal.call()
1.子類對(duì)象指向父類對(duì)象
2.子類原型對(duì)象繼承父類原型對(duì)象
/**
* ES6繼承 使用extends關(guān)鍵字實(shí)現(xiàn)繼承
*/
class Animal{
// 構(gòu)造器屬性 實(shí)例私有屬性
constructor(name,age,length){
this.name = name;
this.age = age;
this.length = length;
}
// 類體方法 實(shí)例公共方法 存放在Animal.prototype中
sayName(){
console.log(this.name);
}
test = 'hello';
friends = [];
// 靜態(tài)屬性和靜態(tài)方法
static ParentAttr = '父類屬性';
static ParentMethod = function(a){
console.log('父類的方法');
return a instanceof Animal;
}
}
// 子類繼承父類 不提供constructor的情況
class Dog extends Animal{
}
let d1 = new Dog('可樂(lè)',12,'50cm');
console.log(d1);
d1.sayName();
d1.friends.push('tom')
console.log(d1.test,d1.friends,d1);
console.log(Dog.ParentAttr);
console.log(Dog.ParentMethod(d1));
// 子類繼承自父類
console.log(Dog.__proto__ === Animal);
// 子類原型對(duì)象繼承自父類的原型對(duì)象
console.log(Dog.prototype.__proto__ === Animal.prototype);
// 子類如果提供了構(gòu)造器 必須顯示調(diào)用super
// class Dog2 extends Animal{
// constructor(name,age,weight,type,color){
// super(name,age,weight); //相當(dāng)于調(diào)用父類構(gòu)造器 Animal.call()
// this.type = type;
// this.color = color;
// }
// sayName(){
// console.log(this.name,'子類實(shí)例公共方法');
// }
// }
// let d2 = new Dog2('可樂(lè)',12,'50cm','狗','黑色');
// console.log(d2);
// d2.sayName();
Symbol
ES6引入的一種新的原始數(shù)據(jù)類型Symbol，表示獨(dú)一無(wú)二的值。Symbol函數(shù)可以接受參數(shù)，表示對(duì)于這個(gè)唯一值的描述。屬于基本數(shù)據(jù)類型,Symbol()函數(shù)會(huì)返回symbol類型的值
參數(shù):字符串 表示對(duì)這個(gè)symbol值的描述
用途
可以產(chǎn)生唯一的值，獨(dú)一無(wú)二的值
let sy1 = Symbol();
let sy2 = Symbol();
console.log(sy1,sy2,sy1 === sy2,sy1.toString());
let a = new Number();
let b = new String();
console.log(a,b);
解決命名沖突
let sy3 = Symbol('name'); //接收的字符串 對(duì)symbol的描述
let sy4 = Symbol('age');
let obj = {
name:'zhangsan',
age:12,
[sy3]:'terry',
[sy4]:18,
[Symbol('email')]:"443119974@qq.com"
}
console.log(obj);
for(let key in obj){
console.log(key);
}
?
getOwnPropertySymbols()
?從上圖輸出結(jié)果來(lái)看：我們可以發(fā)現(xiàn)for in循環(huán)無(wú)法遍歷到symbol值作為屬性名對(duì)應(yīng)的屬性，我們想要獲取所有的symbol值對(duì)應(yīng)的屬性,，則需要使用getOwnPropertySymbols()方法
/**
* 獲取所有的symbol值對(duì)應(yīng)的屬性
* getOwnPropertySymbols
*/
console.log(Object.getOwnPropertySymbols(obj));
let s = Object.getOwnPropertySymbols(obj); //[ Symbol(name), Symbol(age), Symbol(email) ]
console.log(obj[s[2]]);
?
?作為全局注冊(cè)表 緩存 ?Symbol.for()
全局注冊(cè)表
Symbol() 不同的是，用 Symbol.for() 方法創(chuàng)建的的 symbol 會(huì)被放入一個(gè)全局 symbol 注冊(cè)表中。Symbol.for() 并不是每次都會(huì)創(chuàng)建一個(gè)新的 symbol，它會(huì)首先檢查給定的 key 是否已經(jīng)在注冊(cè)表中了。假如是，則會(huì)直接返回上次存儲(chǔ)的那個(gè)。否則，它會(huì)再新建一個(gè)。
/**
* 3.作為全局注冊(cè)表 緩存 Symbol.for()
*/
// 將symbol放到全局注冊(cè)表中
let sy5 = Symbol.for('hello');
let sy6 = Symbol.for('hello');
console.log(sy5 === sy6); //true
// 每次都會(huì)創(chuàng)建一個(gè)不同symbol值 雖然描述符一樣 但是Symbol value值不一樣
let sy7 = Symbol('hello');
let sy8 = Symbol('hello');
console.log(sy7 === sy8); //false
// Symbol.keyFor()可以檢測(cè)symbol值是否在全局注冊(cè)表中注冊(cè)過(guò)。 返回對(duì)于symbol的描述或者undefined
console.log(Symbol.keyFor(sy5));
console.log(Symbol.keyFor(sy6));
console.log(Symbol.keyFor(sy7));Symbol.keyFor()可以檢測(cè)symbol值是否在全局注冊(cè)表中注冊(cè)過(guò)。 返回對(duì)于symbol的描述或者undefined?
?消除魔術(shù)字符串
魔術(shù)字符串指的是，在代碼之中多次出現(xiàn)、與代碼形成強(qiáng)耦合的某一個(gè)具體的字符串或者數(shù)值。
/** * 4.消除魔術(shù)字符串 */ function getArea(shape,options){ let area = 0; switch(shape){ case Shape.SJX: area = .5 * options.height * options.width; break; case Shape.ZFX: area = options.height * options.width; break; case Shape.CIRCLE: area = Math.PI * options.r * options.r; break; default: area = -1; } return area; } const Shape = { SJX:Symbol('三角形'), ZFX:Symbol('正方形'), CIRCLE:Symbol('圓'), } let res = getArea(Shape.SJX,{height:100,width:100,r:50}) console.log(res); Shape.SJX = Symbol('六邊形'); console.log(Shape);
?模版字符串
模板字面量是用反引號(hào)（
`）分隔的字面量，允許多行字符串、帶嵌入表達(dá)式的字符串插值和一種叫帶標(biāo)簽的模板的特殊結(jié)構(gòu)。模板字面量有時(shí)被非正式地叫作模板字符串，因?yàn)樗鼈冏畛１挥米髯址逯担ㄍㄟ^(guò)替換占位符來(lái)創(chuàng)建字符串）。然而，帶標(biāo)簽的模板字面量可能不會(huì)產(chǎn)生字符串——它可以與自定義標(biāo)簽函數(shù)一起使用，來(lái)對(duì)模板字面量的不同部分執(zhí)行任何操作。
/**
* 模版字符串 可以解析變量
*/
let name = 'zhangsan';
let age = 12;
// let str = 'name' + 'age';
let str = `${name}+${age}`
console.log(str);
let id = 1;
let url = `121.199.0.35:8888/findById?id=${id}`;
console.log(url);
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-569649.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-569649.html
到了這里，關(guān)于ES6類-繼承-Symbol-模版字符串的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
