es7學(xué)習(xí)教程之Decorators（修飾器）詳解
更新時(shí)間：2017年07月21日 11:09:30 投稿：daisy
這篇文章主要給大家介紹了關(guān)于es7中Decorators（修飾器）的相關(guān)資料，文中通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
本文主要給大家介紹的是關(guān)于es7 Decorators（修飾器）的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹：
ES6 Decorators（修飾器）
修飾器（Decorator）是一個(gè)函數(shù)，用來(lái)修改類的行為。這是ES7的一個(gè)提案，目前Babel轉(zhuǎn)碼器已經(jīng)支持
我們?cè)谟螒虼笮晚?xiàng)目種經(jīng)常會(huì)用到的方法，現(xiàn)在es6直接支持
想要使用Decorator的話需要我們配置一下文件夾，配置一下環(huán)境
npm install babel-plugin-transform-decorators-legacy --save-dev
完事配置一下babelrc文件
"plugins": ["transform-decorators-legacy"]
先說(shuō)一下裝飾器的特點(diǎn)
裝飾器本質(zhì)是一個(gè)函數(shù)
@hometown hometown()
裝飾對(duì)象可以使用多個(gè)裝飾器
@hometown("山西")
@school
class Student{
constructor(name){
this.name=name;
}
@studyke("HTML")
study(){
console.log(this.name+" is studying"+this.ke+"!")
}
}
裝飾器可以帶參數(shù)
function hometown(diqu){
//target.home="廣靈";
return function(target){
target.home=diqu;
}
}
@hometown("山西")
class...
裝飾器修飾 類
function school(target){
console.log("123")
target.schoolName="師徒課堂";
}
function hometown(diqu){
//target.home="廣靈";
return function(target){
target.home=diqu;
}
}
function studyke(kemu){
return function(target){
target.ke=kemu;
}
}
@hometown("山西")
@school
class Student{
constructor(name){
this.name=name;
}
@studyke("HTML")
study(){
console.log(this.name+" is studying"+this.ke+"!")
}
}
console.log(Student.schoolName);
console.log(Student.home);
let l=new Student("xiaoA");
l.study();
@school
function Teacher(){
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了利用JavaScript的Map提升性能的方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。可以說(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)2015-11-11
今天小編就為大家分享一篇layer.js open 隱藏滾動(dòng)條的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。 一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了JS去除字符串中空格的方法,涉及javascript字符串的正則、遍歷、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計(jì)模式中最常用的設(shè)計(jì)模式之一，這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對(duì)象的最佳方式，下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下2022-04-04
js判斷瀏覽器類型及設(shè)備（移動(dòng)頁(yè)面開(kāi)發(fā)）
這篇文章主要介紹了js判斷瀏覽器類型及設(shè)備（移動(dòng)頁(yè)面開(kāi)發(fā)）,需要的朋友可以參考下2015-07-07
javascript實(shí)現(xiàn)自動(dòng)輸出文本（打字特效）
文字如何實(shí)現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁(yè)的時(shí)候也經(jīng)常能看到這種效果。本文給大家匯總介紹了幾種打字效果的文字特效,文字一個(gè)一個(gè)地打印在頁(yè)面上。2015-08-08
Javascript打印網(wǎng)頁(yè)部分內(nèi)容的腳本
有時(shí)候我們只需要打印部分內(nèi)容，因?yàn)楝F(xiàn)在的頁(yè)面中廣告和一些相關(guān)內(nèi)容很多，所有用下面的方法，就可以了2008-11-11
JavaScript展開(kāi)運(yùn)算符和剩余運(yùn)算符的區(qū)別詳解
本文主要介紹了JavaScript展開(kāi)運(yùn)算符和剩余運(yùn)算符的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
微信小程序canvas實(shí)現(xiàn)環(huán)形漸變
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)環(huán)形漸變，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08