~~~
namespace a {
interface Person {
xx: string;
yy: string
}
function enhancer(target: any) {
target.prototype.xx = 'xx';
target.prototype.yy = 'yy';
}
@enhancer
class Person {
constructor() { }
}
let p = new Person();
console.log(p.xx);
console.log(p.yy);
}
//把類整個替換
namespace b {
function enhancer() {
return function (target: any) {
return class extends Person {
constructor(name: string, age: number) {
super(name, age);
}
getAge() {
console.log(this.age);
}
}
}
}
@enhancer()
class Person {
public name: string = 'person';
public age: number = 10;
constructor(name: string, age: number) { this.name = name, this.age = age }
}
let p = new Person('zhufeng', 10);
p.name;
}
//屬性裝飾器 裝飾屬性
namespace c {
//target如果裝飾的是個普通屬性的話,那么這個target指向類的原型 Person.prototype
//target裝飾的是一個類的屬性static,那么這個target指定類的定義
function upperCase(target: any, propertyName: string) {
let value = target[propertyName];
const getter = () => value;
const setter = (newVal: string) => {
value = newVal.toUpperCase();
}
delete target[propertyName];
Object.defineProperty(target, propertyName, {
get: getter,
set: setter,
enumerable: true,
configurable: true
});
}
function propertyEnumerable(flag: boolean) {
return function (target: any, methodName: string) {
}
}
function methodEnumerable(flag: boolean) {
return function (target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
propertyDescriptor.enumerable = flag;
}
}
function setAge(age: number) {
return function (target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
target.age = age;
}
}
function toNumber(target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
let oldMethod = propertyDescriptor.value;
propertyDescriptor.value = function (...args: any[]) {
args = args.map(item => parseFloat(item));
return oldMethod.apply(this, args);
}
}
class Person {
static age: number;
@upperCase
@propertyEnumerable(false)
name: string = 'zhufeng'
@methodEnumerable(true)
getName() {
console.log('getName');
}
@setAge(100)
static getAge() {
}
@toNumber
sum(...args: any[]) {
return args.reduce((accu, item) => accu + item, 0);
}
}
let p = new Person();
p.name = 'jiagou';
console.log(p.name);//JIAGOU
for (let attr in p) {
console.log('attr=' + attr);
}
console.log(Person.age);
console.log(p.sum(1, '2', '3'));
}
namespace d {
interface Person {
age: number
}
//Person.prototype login 1
function addAge(target: any, methodName: string, paramsIndex: number) {
console.log(target, methodName, paramsIndex);
target.age = 10;
}
//參數裝飾 方法參數
class Person {
login(username: string, @addAge password: string) {
console.log(this.age, username, password);
}
}
let p = new Person();
p.login('zhufeng', '123');
}
namespace e {
function Class1Decorator() {
return function (target: any) {
console.log("類1裝飾器");
}
}
function Class2Decorator() {
return function (target: any) {
console.log("類2裝飾器");
}
}
function MethodDecorator() {
return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
console.log("方法裝飾器");
}
}
function Param1Decorator() {
return function (target: any, methodName: string, paramIndex: number) {
console.log("參數1裝飾器");
}
}
function Param2Decorator() {
return function (target: any, methodName: string, paramIndex: number) {
console.log("參數2裝飾器");
}
}
function PropertyDecorator(name: string) {
return function (target: any, propertyName: string) {
console.log(name + "屬性裝飾器");
}
}
@Class1Decorator()
@Class2Decorator()
class Person {
@MethodDecorator()
greet(@Param1Decorator() p1: string, @Param2Decorator() p2: string) { }
@PropertyDecorator('name')
name: string = 'zhufeng';
@PropertyDecorator('age')
age: number = 10;
}
}
//屬性方法先執行,誰先寫先執行誰
//方法的時候,先參數再方法,而且 他們一定會在一起
//最后是類
//如果是同類型的,先執行后寫的
~~~
- 文檔簡介
- 基礎面試題【珠峰2019.8】
- P01_call,aplly區別
- P02_綜合面試題講解2-2
- P03_箭頭函數和普通函數區別-綜合面試題講解2-3
- P05_實現indexOf
- P06_綜合面試題講解2-6
- P07_URL解析題
- P08_原型題
- P09_圖片延時加載
- P10_正則-包含數字字母下劃線
- P11_綜合面試題講解2-11
- P12_英文字母加空格
- P13_數組扁平化并去重
- P14_模擬實現new
- P15_合并數組
- P16_定時器,打印012345
- P17_匿名函數輸出值問題
- P18_a在什么情況下打印輸出+1+1+1
- P19_對數組的理解
- P20_冒泡排序
- P21_插入排序
- P22_快速排序
- P23_銷售額存在對象中
- P24_求數組的交集
- P25_旋轉數組
- P26_ [函數柯理化思想]
- P27_ [柯理化函數的遞歸]
- 網絡協議【珠峰2019.6】
- TypeScript+Axios入門+實戰【珠峰2019.11】
- 1.數據結構
- 2.函數和繼承
- 3.裝飾器
- 4.抽象類-接口-泛型
- 05-結構類型系統和類型保護
- 06-類型變換
- AST-抽象語法樹
- React性能優化【珠峰2019.10】
- 1-react性能優化
- 2-react性能優化
- 3.react-immutable
- React Hooks【珠峰2019.12】
- 前端框架及項目面試
- 第07章 React 使用
- 7-1 React使用-考點串講
- 7-2 JSX基本知識點串講
- 7-3 JSX如何判斷條件和渲染列表
- 7-4 React事件為何bind this
- 7-5 React事件和DOM事件的區別
- 7-6 React表單知識點串講
- 7-7 React父子組件通訊
- 7-8 setState為何使用不可變值
- 7-9 setState是同步還是異步
- 7-10 setState合適會合并state
- 7-11 React組件生命周期
- 7-12 React基本使用-知識點總結和復習
- 7-13 React函數組件和class組件有何區別
- 7-14 什么是React非受控組件
- 7-15 什么場景需要用React Portals
- 7-16 是否用過React Context
- 7-17 React如何異步加載組件
- 7-18 React性能優化-SCU的核心問題在哪里
- 7-19 React性能優化-SCU默認返回什么
- 7-20 React性能優化-SCU一定要配合不可變值
- 7-21 React性能優化-PureComponent和memo
- 7-22 React性能優化-了解immutable.js
- 7-23 什么是React高階組件
- 7-24 什么是React Render Props
- 7-25 React高級特性考點總結
- 7-26 Redux考點串講
- 7-27 描述Redux單項數據流
- 7-28 串講react-redux知識點
- 7-29 Redux action如何處理異步
- 7-30 簡述Redux中間件原理
- 7-31 串講react-router知識點
- 7-32 React使用-考點總結
- 第08章 React 原理
- 8-1 React原理-考點串講
- 8-2 再次回顧不可變值
- 8-3 vdom和diff是實現React的核心技術
- 8-4 JSX本質是什么
- 8-5 說一下React的合成事件機制
- 8-6 說一下React的batchUpdate機制
- 8-7 簡述React事務機制
- 8-8 說一下React組件渲染和更新的過程
- 8-9 React-fiber如何優化性能
- 第09章 React 面試真題演練
- 9-1 React真題演練-1-組件之間如何通訊
- 9-2 React真題演練-2-ajax應該放在哪個生命周期
- 9-3 React真題演練-3-組件公共邏輯如何抽離
- 9-4 React真題演練-4-React常見性能優化方式
- 9-5 React真題演練-5-React和Vue的區別
- 第10章 webpack 和 babel
- 10-1 webpack考點梳理
- 10-2 webpack基本配置串講(上)
- 10-3 webpack基本配置串講(下)
- 10-4 webpack如何配置多入口
- 10-5 webpack如何抽離壓縮css文件
- 10-6 webpack如何抽離公共代碼和第三方代碼
- 10-7 webpack如何實現異步加載JS
- 10-8 module chunk bundle 的區別
- 10-9 webpack優化構建速度-知識點串講
- 10-11 happyPack是什么
- 10-12 webpack如何配置熱更新
- 10-13 何時使用DllPlugin
- 10-14 webpack優化構建速度-考點總結和復習
- 10-15 webpack優化產出代碼-考點串講
- 10-16 什么是Tree-Shaking
- 10-17 ES Module 和 Commonjs 的區別
- 10-18 什么是Scope Hostin
- 10-19 babel基本概念串講
- 10-20 babel-polyfill是什么
- 10-21 babel-polyfill如何按需引入
- 10-22 babel-runtime是什么
- 10-23 webpack考點總結和復習
- 10-24 webpack面試真題-前端代碼為何要打包
- 10-25 webpack面試真題-為何Proxy不能被Polyfill
- 10-26 webpack面試真題-常見性能優化方法