摘要:歡迎關(guān)注前端小謳的,閱讀更多原創(chuàng)技術(shù)文章用構(gòu)造函數(shù),生成對象實例使用構(gòu)造函數(shù),并且構(gòu)造函數(shù)后臺會隱式執(zhí)行創(chuàng)建對象將構(gòu)造函數(shù)的作用域給新對象,即創(chuàng)建出的對象,函數(shù)體內(nèi)的代表出來的對象執(zhí)行構(gòu)造函數(shù)的代碼返回新對象后臺直接返回用改寫上述代碼通過關(guān)
歡迎關(guān)注前端小謳的github,閱讀更多原創(chuàng)技術(shù)文章
用構(gòu)造函數(shù),生成對象實例:
使用構(gòu)造函數(shù),并且new 構(gòu)造函數(shù)(), 后臺會隱式執(zhí)行new Object() 創(chuàng)建對象
將構(gòu)造函數(shù)的作用域給新對象,(即new Object() 創(chuàng)建出的對象),函數(shù)體內(nèi)的this代表new Object() 出來的對象
執(zhí)行構(gòu)造函數(shù)的代碼
返回新對象( 后臺直接返回)
function Person1(name, age) { this.name = name this.age = age } Person1.prototype.say = function () { return "My name is " + this.name + ", I"m " + this.age + " years old." } var obj = new Person1("Simon", 28); console.log(obj.say()); // My name is Simon, I"m 28 years old.
用class改寫上述代碼:
通過class關(guān)鍵字定義類,使得在對象寫法上更清晰,讓javascript更像一種面向?qū)ο蟮恼Z言
在類中聲明方法的時,不可給方法加function關(guān)鍵字
class Person2 { // 用constructor構(gòu)造方法接收參數(shù) constructor(name, age) { this.name = name; // this代表的是實例對象 this.age = age; } // 類的方法,此處不能加function say() { return "My name is " + this.name + ", I"m " + this.age + " years old." } } var obj = new Person2("Coco", 26); console.log(obj.say()); // My name is Coco, I"m 26 years old.
ES6中的類,實質(zhì)上就是一個函數(shù)
類自身指向的就是構(gòu)造函數(shù)
類其實就是構(gòu)造函數(shù)的另外一種寫法
console.log(typeof Person2); // function console.log(Person1 === Person1.prototype.constructor); // true console.log(Person2 === Person2.prototype.constructor); // true
構(gòu)造函數(shù)的prototype屬性,在ES6的class中依然存在:
// 構(gòu)造1個與類同名的方法 -> 成功實現(xiàn)覆蓋 Person2.prototype.say = function () { return "證明一下:My name is " + this.name + ", I"m " + this.age + " years old." } var obj = new Person2("Coco", 26); console.log(obj.say()); // 證明一下:My name is Coco, I"m 26 years old. // 通過prototype屬性對類添加方法 Person2.prototype.addFn = function () { return "通過prototype新增加的方法addFn" } var obj = new Person2("Coco", 26); console.log(obj.addFn()); // 通過prototype新增加的方法addFn
通過Object.assign方法來為對象動態(tài)增加方法:
Object.assign(Person2.prototype, { getName: function () { return this.name; }, getAge: function () { return this.age; } }) var obj = new Person2("Coco", 26); console.log(obj.getName()); // Coco console.log(obj.getAge()); // 26
constructor方法是類的構(gòu)造函數(shù)的默認方法
new生成對象實例時,自動調(diào)用該方法
class Box { constructor() { console.log("自動調(diào)用constructor方法"); // 實例化對象時,該行代碼自動執(zhí)行 } } var obj = new Box();
若沒有定義constructor方法,將隱式生成一個constructor方法:
即使沒有添加構(gòu)造函數(shù),構(gòu)造函數(shù)也是存在的
constructor方法默認返回實例對象this
可以指定constructor方法返回一個全新的對象,讓返回的實例對象不是該類的實例對象
class Text1 { constructor() { this.text = "這是一段Text"; } } class Text2 { constructor() { return new Text1(); // 返回一個全新的對象 } } var obj = new Text2() console.log(obj.text); // 這是一段Text
實例屬性:constructor中定義的屬性,即定義在this對象上
原型屬性:constructor外聲明的屬性,即定義在class上hasOwnProperty() 函數(shù),判斷屬性是否為實例屬性 -> true or false
in操作符, 判斷對象能否訪問給定屬性 -> true or false(與該屬性存在于實例/原型中無關(guān))
class Text3 { // 實例屬性,定義在this對象上 constructor(text1, text2) { this.text1 = text1 this.text2 = text2 } // 原型屬性,定義在class上 text3() { return text1 + text2 } } var obj = new Text3("123", "234") console.log(obj.hasOwnProperty("text1")); // true console.log(obj.hasOwnProperty("text2")); // true console.log(obj.hasOwnProperty("text3")); // false console.log("text1" in obj); // true console.log("text2" in obj); // true console.log("text3" in obj); // true console.log("text4" in obj); // false
類的所有實例共享一個原型對象, 它們的原型都是Person.prototype, 所以proto屬性是相等的
class Text4 { constructor(text1, text2) { this.text1 = text1; this.text2 = text2; } text3() { return text1 + text1; } } // text1與text2都是Text4的實例 -> 它們的__proto__都指向Text4的prototype var text1 = new Text4("1234", "5678"); var text2 = new Text4("4321", "8765"); console.log(text1.__proto__ === text2.__proto__); // true
通過proto來為類增加方法:
使用實例的proto屬性改寫原型
會改變Class的原始定義,影響到所有實例,不推薦使用
class Num { constructor(num1, num2) { this.num1 = num1; this.num2 = num2; } sum() { return num1 + num2; } } var num1 = new Num(20, 78); var num2 = new Num(40, 96); num1.__proto__.minus = function () { return this.num2 - this.num1; } console.log(num1.minus()); // 76 -> 改變了class的原始定義,為class新增原型屬性minus console.log(num2.minus()); // 20 -> num2和num1共享原型對象Num,可以調(diào)用原型對象的minus方法
class不存在變量提升,必須先定義再使用:
ES6不會把class的聲明提升到代碼頭部2
ES5存在變量提升, 可以先使用再定義
//ES5可以先使用再定義,存在變量提升 new A() function A() {} //ES6不能先使用再定義,不存在變量提升(報錯) new B() // B is not defined class B {}
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/104280.html
摘要:原文地址詳解的類博主博客地址的個人博客從當(dāng)初的一個彈窗語言,一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。那么,的類又該怎么定義呢在面向?qū)ο缶幊讨?,類是對象的模板,定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現(xiàn)已棄用。。 前言 生活有度,人生添壽。 原文地址:詳解javascript的類 博主博客地址:Damonare的個人博客 ??Javascript從當(dāng)初的一個彈窗語言,一...
摘要:原文地址詳解的類博主博客地址的個人博客從當(dāng)初的一個彈窗語言,一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。那么,的類又該怎么定義呢在面向?qū)ο缶幊讨?,類是對象的模板,定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現(xiàn)已棄用。。 前言 生活有度,人生添壽。 原文地址:詳解javascript的類 博主博客地址:Damonare的個人博客 ??Javascript從當(dāng)初的一個彈窗語言,一...
摘要:命令用于規(guī)定模塊的對外接口,命令用于輸入其他模塊提供的功能所以在一定程度上來說,也具有聲明變量的功能。當(dāng)沒有聲明,直接給變量賦值時,會隱式地給變量聲明,此時這個變量作為全局變量存在。 前言 如果文章中有出現(xiàn)紕漏、錯誤之處,還請看到的小伙伴多多指教,先行謝過 在ES5階段,JavaScript 使用 var 和 function 來聲明變量, ES6 中又添加了let、const、imp...
摘要:對象詳解對象深度剖析,深度理解對象這算是醞釀很久的一篇文章了。用空構(gòu)造函數(shù)設(shè)置類名每個對象都共享相同屬性每個對象共享一個方法版本,省內(nèi)存。 js對象詳解(JavaScript對象深度剖析,深度理解js對象) 這算是醞釀很久的一篇文章了。 JavaScript作為一個基于對象(沒有類的概念)的語言,從入門到精通到放棄一直會被對象這個問題圍繞。 平時發(fā)的文章基本都是開發(fā)中遇到的問題和對...
閱讀 2250·2023-04-25 19:06
閱讀 1448·2021-11-17 09:33
閱讀 1848·2019-08-30 15:53
閱讀 2658·2019-08-30 14:20
閱讀 3610·2019-08-29 12:58
閱讀 3615·2019-08-26 13:27
閱讀 578·2019-08-26 12:23
閱讀 552·2019-08-26 12:22