成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

ECMAScript6入門--Class對(duì)象

wayneli / 2133人閱讀

摘要：中沒(méi)有類的概念，因此它的對(duì)象和基于類的語(yǔ)言中的對(duì)象有所不同。生成對(duì)象的傳統(tǒng)方法是通過(guò)構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)的上述這種方式因?yàn)楹椭新暶鞣椒ǖ男问揭粯樱詫?duì)象和方法的區(qū)分并不明顯，很容易造成混淆。要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù)，否則就會(huì)報(bào)錯(cuò)。

面向?qū)ο蟮恼Z(yǔ)言有一個(gè)標(biāo)志，那就是他們都有類的概念，通過(guò)類可以創(chuàng)建任意多個(gè)具有相同屬性和方法的對(duì)象。

ECMAScript5中沒(méi)有類的概念，因此它的對(duì)象和基于類的語(yǔ)言中的對(duì)象有所不同。

Javascript生成對(duì)象的傳統(tǒng)方法是通過(guò)構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)的

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        return "Hello "+ this.name;
    }
}

var person = new Person("dahan",18);
person.sayHello();
//Hello dahan

上述這種方式因?yàn)楹蚃avascript中聲明方法的形式一樣，所以對(duì)象和方法的區(qū)分并不明顯，很容易造成混淆。

ES6引入了Class(類)的概念，我們通過(guò)ES6的語(yǔ)法進(jìn)行創(chuàng)建對(duì)象的時(shí)候，可以像Java語(yǔ)法一樣，使用關(guān)鍵字class，用來(lái)定義類。當(dāng)然，這種語(yǔ)法的功能，通過(guò)ES5也都可以實(shí)現(xiàn)，它只是讓類的定義更加清晰，更容易理解。

//類的定義
class Person {
    //ES6中新型構(gòu)造器
    constructor(name) {
        this.name = name;
    }
    //實(shí)例方法
    sayName() {
        console.log("我的名字叫"+ this.name);
    }
}
//類的繼承
class Programmer extends Person {
    constructor(name) {
        //直接調(diào)用父類構(gòu)造器進(jìn)行初始化
        super(name);
    }
    program() {
        cosnole.log("這是我的地盤");
    }
}
//運(yùn)行測(cè)試
var person = new Person("lingxiao");
var coder = new Programmer("coder");

person.sayName();
//我的名字叫l(wèi)ingxiao
coder.sayName();
//我的名字叫coder
coder.program();
//這是我的地盤

下面來(lái)注意講述一下上述代碼中出現(xiàn)的語(yǔ)法。

constructor

constructor是類的默認(rèn)方法，就像Java中的main方法一樣，每個(gè)類都必須有constructor方法。

在通過(guò)new實(shí)例化對(duì)象的時(shí)候，就會(huì)自動(dòng)調(diào)用constructor方法，得到的也就是constructor返回的值。constructor默認(rèn)返回當(dāng)前類的實(shí)例對(duì)象（this），但是我們也可以指定另外一個(gè)對(duì)象，當(dāng)然，這樣就會(huì)導(dǎo)致實(shí)例化出來(lái)的對(duì)象，并不是當(dāng)前類的實(shí)例。

class Person {
    constructor(){
        var ob = new Object();
        return Ob;
    }
    sayHello(){
        return "Hello World"
    }
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function

我們?cè)趯?shí)例化對(duì)象的時(shí)候，ES6規(guī)定我使用new關(guān)鍵字，如果直接調(diào)用，會(huì)當(dāng)成函數(shù)來(lái)調(diào)用。

class Person {
    constructor(name){
        this.name = name;
    }
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without "new"
this

在最開始的代碼中，我們看到了this，this在類中指向的就是實(shí)例本身，但是如果我們?cè)陬惖姆椒ㄖ惺褂昧藅his，多帶帶調(diào)用此方法的時(shí)候，就會(huì)出現(xiàn)錯(cuò)誤。

class Person{
    constructor(name){
        this.name = name;
    }
    sayHello() {
        return "Hello "+this.name
    }
}
var person  =  new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property "name" of undefined

針對(duì)這個(gè)我們可以很簡(jiǎn)單的在構(gòu)造方法中綁定this

class Person{
    constructor(name){
        this.name = name;
        this.sayHello = this.sayHello.call(this);
    }
    sayHello() {
        return "Hello "+this.name
    }
}
繼承extend

我們想要在一個(gè)類上擴(kuò)展一些屬性，但又不想修改原類，就用到了繼承。

//類的繼承
class Programmer extends Person {
    constructor(name,age) {
        this.age = age;//報(bào)錯(cuò)
        //直接調(diào)用父類構(gòu)造器進(jìn)行初始化
        super(name);
    }
    program() {
        cosnole.log("這是我的地盤");
    }
}

使用繼承的時(shí)候，需要用super關(guān)鍵字來(lái)調(diào)用父類，super(name)就呆逼啊調(diào)用父類的constructor方法。

另外，我們使用的繼承的時(shí)候，super關(guān)鍵字也幫我們改變了this的指向，所以我們必須要先調(diào)用super方法，然后才能使用this。ES6要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)，否則就會(huì)報(bào)錯(cuò)。

最后

class關(guān)鍵字的出現(xiàn)，也讓Javascript看上去更加像一個(gè)面向?qū)ο笳Z(yǔ)言，愿Javascript越變?cè)胶迷揭子谩?/p>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82708.html

相關(guān)文章

  • ECMAScript6標(biāo)準(zhǔn)入門（一）新增變量與數(shù)據(jù)結(jié)構(gòu)

    摘要：一簡(jiǎn)介與的關(guān)系是的規(guī)格，是的一種實(shí)現(xiàn)另外的方言還有和轉(zhuǎn)碼器命令行環(huán)境安裝直接運(yùn)行代碼命令將轉(zhuǎn)換成命令瀏覽器環(huán)境加入，代碼用環(huán)境安裝，，根目錄建立文件加載為的一個(gè)鉤子設(shè)置完文件后，在應(yīng)用入口加入若有使用，等全局對(duì)象及上方法安裝 一、ECMAScript6 簡(jiǎn)介 (1) 與JavaScript的關(guān)系 ES是JS的規(guī)格，JS是ES的一種實(shí)現(xiàn)（另外的ECMAScript方言還有Jscript和...

    Tangpj 評(píng)論0 收藏0

  • 【前端】ES6入門基礎(chǔ)知識(shí)

    摘要：關(guān)于的入門了解新增模板字符串為提供了簡(jiǎn)單的字符串插值功能箭頭函數(shù)操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值。將對(duì)象納入規(guī)范，提供了原生的對(duì)象。增加了和命令，用來(lái)聲明變量。 關(guān)于ES6的入門了解 新增模板字符串（為JavaScript提供了簡(jiǎn)單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-o...

    philadelphia 評(píng)論0 收藏0

  • Vue.js新手入門指南[轉(zhuǎn)載]

    摘要：就是一個(gè)用于搭建類似于網(wǎng)頁(yè)版知乎這種表單項(xiàng)繁多，且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁(yè)版應(yīng)用。單頁(yè)應(yīng)用程序顧名思義，單頁(yè)應(yīng)用一般指的就是一個(gè)頁(yè)面就是應(yīng)用，當(dāng)然也可以是一個(gè)子應(yīng)用，比如說(shuō)知乎的一個(gè)頁(yè)面就可以視為一個(gè)子應(yīng)用。 最近在逛各大網(wǎng)站，論壇，以及像SegmentFault等編程問(wèn)答社區(qū)，發(fā)現(xiàn)Vue.js異?；鸨貜?fù)性的提問(wèn)和內(nèi)容也很多，樓主自己也趁著這個(gè)大前端的熱潮，著手學(xué)習(xí)了一...

    MartinHan 評(píng)論0 收藏0

  • ECMAScript6學(xué)習(xí)筆記

    摘要：筆記和和是塊作用域的，是聲明常量用的。一個(gè)對(duì)象如果要有可被循環(huán)調(diào)用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對(duì)象具有該方法也可。這種方式會(huì)訪問(wèn)注冊(cè)表，其中存儲(chǔ)了已經(jīng)存在的一系列。這種方式與通過(guò)定義的獨(dú)立不同，注冊(cè)表中的是共享的。 ECMAScript6 筆記 let 和 const let和const是塊作用域的 ，const是聲明常量用的。 {let a = 10;} a ...

    CODING 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<