javaScript 語言中,生成例項物件的傳統方法是通過建構函式,與傳統的面嚮物件語言(比如 C++ 和 Java)差異很大,ES6 提供了更接近傳統語言的寫法,引入了 class(類)這個概念,作為物件的模板。通過class
關鍵字,可以定義類。
es6 class 與es5的物件導向的區別:
1. 寫法不同,使用關鍵字class
2.當new一個例項,預設有一個constructor方法,且預設返回例項物件(this),也可以返回另一物件
3.類的所有方法都在prototype屬性上,但是不可列舉,且每方法結束不能使用分號
4.類的呼叫必須通過new 一個例項,且類的內部預設使用嚴格模式
5.不存在變數提升,必須先宣告,再呼叫
6.class的this 預設指向當前類
7.class 的靜態方法,使用關鍵字static,不需new,直接通過類來呼叫
8. 例項屬性和靜態屬性的寫法,例項屬性在類的內部直接使用等式(=)寫法,也可以寫在constructor 方法裡,靜態屬性只需在例項屬性前加一個關鍵字static即可
9.類的繼承使用關鍵字extends,繼承機制與es5完全不同,
es5的繼承原理:先new子類的例項物件this,再通過將父類的方法和屬性新增到子類的this上(parents.call(this))。
Es6的繼承原理:先創造父類的例項物件this,所以要建構函式constructor()訪問父類的屬性使用this,必須先呼叫super()方法;再通過子類的constructor()來修改this
10.類的繼承可以繼承原生的建構函式,es5不可以
1. 一般寫法(es5 與es6)
//一.ES5寫法: function Animate(name){ this.name = name; } Animate.prototype.getname = function(){ console.log(this.name) } var p =new Animate("lity"); p.getname(); //二.ES6,物件導向的寫法,calss, class Person{ //constructor():構造方法是預設方法,new的時候回自動呼叫,如果沒有顯式定義,會自動新增 //1.適合做初始化資料 //2.constructor可以指定返回的物件 constructor(name,age){ this.name = name; this.age = age; } getval(){ console.log(`你是${this.name},${this.age}歲`); } } var c1 = new Person("lity",20);
c1.getval();
ES6 的class
可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到
注意 :class 類的本質還是一個函式,類本身就指向建構函式。
typeof Person //function Person === Person.prototype.constructor // true
我們使用Object的一些屬性或者方法檢測一下 用es6 寫的例項物件
//1.檢視例項物件c1的__proto__是否指向Person的原型(Person.prototype) console.log(c1.__proto__==Person.prototype)//true console.log(c1.__proto__)//原型物件的所有方法 //2.isPrototypeOf:檢測例項物件是否是某個函式的原型 console.log(Person.prototype.isPrototypeOf(c1));//true //3.constructor:檢視某個物件的建構函式 console.log(c1.constructor); //4.hasOwnProperty:檢測某個屬性是否是自己的屬性;不是原型物件上的屬性和方法 console.log(c1.hasOwnProperty("name"))//true; //5.in:通過in可以檢測屬性是否在自己中(this)或者是原型中存在 console.log("getval" in c1)//原型上存在,true console.log("name" in c1)//constructor(自己上存在),true //6.自定義檢測屬性是否是存在 function hasproperty(attr,obj){ return obj.hasOwnProperty(attr)&&(attr in obj); } console.log(hasproperty("name",c1));//true;
2.表示式寫法
//class表示式 const Myclass = class Me{//這裡的Me是沒有作用的 constructor(name,jog){ this.name = name; this.jog = jog; } getval(){ console.log(`name is ${this.name},job is a ${this.jog}`); } } var obj1 = new Myclass("lylt","teacher"); obj1.getval();
3.class的私有方法(ES6不提供寫法)和私有屬性(也不提供寫法,提案用#識別)
4.ES6規定Class類沒有靜態屬性,只有靜態方法:static
class Foo { static classMethod() { return `lity`; } } console.log(Foo.classMethod()) // `hello`
5.new.target屬性
//ES5:原始寫法物件 function objtarge(name){ if(new.target==undefined){ throw new Error("必須例項化物件"); }else{ this.name = name } } var targets = new objtarge("litys"); console.log(targets.name);//litys //es6寫法:class內部使用new.target,返回當前的calss class caltartget{ constructor(name){ console.log(new.target==caltartget);//true if(new.target!==caltartget){ throw new Error("例項化物件不是caltrget"); }else{ this.name = name; } } } var caltart = new caltartget("lity"); console.log(caltart.name);//lity
6.this指向
類的方法內部如果含有this
,它預設指向類的例項。但是,必須非常小心,一旦單獨使用該方法,很可能報錯
如下示例
class Logger { printName(name = `there`) { this.print(`Hello ${name}`); } print(text) { console.log(text); } } const logger = new Logger(); const { printName } = logger; printName(); // TypeError: Cannot read property `print` of undefined
分析以上示例:prinName 的方法中this,預設指向 類Logger,但是將改方法單獨呼叫,就會報錯,this會指向所在執行的環境,所以因為找不到this.print()方法而報錯。
針對以上解決this指向的方法:
(1). 使用bind(this)
(2). 使用es6 的箭頭函式 ()=>{}
(3).使用Proxy 代理
//1.bind()方法 class Logger { constructor() { this.printName = this.printName.bind(this); } // ... } //2.箭頭函式 ()=>{} class Logger { constructor() { this.printName = (name = `there`) => { this.print(`Hello ${name}`); }; } // ... } //3. Porxy() .................
7.class 的get() 和set() 方法
與 ES5 一樣,在“類”的內部可以使用get
和set
關鍵字,對某個屬性設定存值函式和取值函式,攔截該屬性的存取行為。
class MyClass { constructor() { // ... } get prop() {// 使用 get 攔截了該方法的返回值 return `getter`; } set prop(value) {//當對該方法賦值時能獲取到該賦值 console.log(`setter: `+value); } } let obj = new MyClass(); obj.prop = 123; // setter: 123 inst.prop // `getter`
8.繼承
Class 可以通過extends
關鍵字實現繼承,這比 ES5 的通過修改原型鏈實現繼承,要清晰和方便很多。
//es5 的繼承 //父類 function Person(name,sex){ this.name = name;//屬性 this.sex = sex;//屬性 } //定義一個原型方法 Person.prototype.show = function(){ console.log("我的姓名是"+this.name+"==="+"我的性別是"+this.sex) } //子類 function Worker(name,sex,job){ //構成函式偽裝:使用call()方法繫結this,偽裝繼承父級的屬性 Person.call(this,name,sex); this.job = job; } //繼承父類的原型方法:(介紹三種方法) //寫法一:通過遍歷父級的原型一個個賦給子級的原型(es5 的原型是可列舉的,es6的不可以列舉) (var i in Person.prototype){ Worker.prototype[i] = Person.prototype[i]; } //寫法:重新new一個父級物件賦給子級的原型 Worker.prototype = new Person(); Worker.prototype.constructor = Worker; //寫法三:建立一個原型物件賦給子級的原型;(es5 推薦) Worker.prototype = Object.create(Person.prototype); Worker.prototype.constructor = Worker; var workers = new Worker("小明","男","job") //es6 的繼承 class Person{ constructor(name,sex){ this.name = name;//屬性 this.sex = sex;//屬性 } } class Worker extends Person{ constructor(name,sex,job){ super(); this.job =job; } } var workers = new Worker("小明","男","job")
8.1:super關鍵字:在子類中不同情況用法不同,既可以當作函式使用,也可以當作物件使用。
//父類 class Aniamte{ constructor(){ if(new.target == Aniamte){ throw new Error("本類不能例項化,只能有子類繼承"); } } //靜態方法 static getval(mgs){ console.log("父類的static",mgs) } //普通方法 setname(){ console.log("該方法有子類重寫") } } //子類 class Dog extends Aniamte{ constructor(){ super();//呼叫此方法,this才用可以用,代表父類的建構函式,返回的卻是子類 //super() ==父類.prototype.constructor.call(子類/this) console.log(this)//Dog {} this.age = 20; } //靜態方法,super在靜態方法中作為物件使用,指向父類; static getval(mgs){ super.getval(mgs)//父類的static niceday console.log("子類的static",mgs)//子類的static niceday } setname(name){ //普通方法,super作為物件使用,指向父類的原型物件,父類.prototype; super.setname();//該方法有子類重寫 this.name = name; return this.name } }; Dog.getval("niceday");//靜態方法,直接呼叫 //var parAni = new Aniamte();//報錯 var dogs = new Dog();//new 一個示例物件 dogs.setname("DOYS");////DOYS
8.2.原生建構函式的繼承,ES5不支援,ES6利用extend可以繼承原生建構函式
//ESMAScript的建構函式有以下幾種 /* Boolean() * Unmber() * String() * Array() * Date() * Function() * RegExp() * Error() * Object() */ //例項一:自定義類Myarray 繼承了原生的陣列的建構函式,擁有原生陣列的屬性和方法了 class Myarray extends Array{ constructor(){ super(); console.log(this.constructor.name)//Myarray } } var myarr = new Myarray(); console.log(Object.prototype.toString.call(myarr));//[object Array] myarr.push(1,2,1); console.log(myarr.length)//3