JS之理解ES6聲明類class原理

daryl 發(fā)布于2019-08-20 18:19 / 2774人閱讀

摘要：原理通過(guò)構(gòu)造函數(shù)聲明類通過(guò)的聲明類原理首先得了解原型鏈的基礎(chǔ)知識(shí)分析是一個(gè)類，也是一個(gè)函數(shù)是一個(gè)對(duì)象指向的是函數(shù)，該函數(shù)還掛了和屬性將函數(shù)掛載的原型上。

ES6 class原理

1.通過(guò)構(gòu)造函數(shù)聲明類

function People(name,age){
 this.name = name;
 this.age = age; 
}

People.prototype.say=function（）{
    console.log("hello)}
    
People.see=function（）{
    alert("how are you")}

2.通過(guò)es6的class聲明類

class People{
  constructor(name,age){
     this.name = name;
     this.age = age}
     
  static see(){alert("how are you")}  }
  
  say(){console.log("hello");}}

3.es6 class原理

首先得了解原型鏈的基礎(chǔ)知識(shí)https://segmentfault.com/a/11...；

分析：①People是一個(gè)類，也是一個(gè)函數(shù)；②constructor是一個(gè)對(duì)象指向的是People函數(shù)，該函數(shù)還掛了name和age屬性；③將say函數(shù)掛載People的原型上。

代碼

let People = function(){ //第①步，創(chuàng)建People函數(shù)
 
 function People(name,age){//第②步，理解constructor就是指向People，People掛載著name和age兩個(gè)屬性
    this.name = name;
    this.age = age;}
   
 //將靜態(tài)和動(dòng)態(tài)的方法分別掛載在People的原型和People上。   
 creatClass(People,[{key:"say",value:function(){
     console.log(123)}}],[{key:"see",value:function(){
     alert("how are you")}}])  
     
 return People;}
 
//這里的Constructor就是指的People  
let creatClass = function({
  return function(Constructor,,protoProps,staticProps){
     //有原型上的方法掛載People.prototype上
     if(protoProps){defineProperties(Constructor.prototype,protoProps)}
      //有People對(duì)象上的方法掛載People上
     if(staticProps){defineProperties(Constructor,staticProps)}}
 
//定義對(duì)象屬性     
let defineProperties =function(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
       Object.defineProperty(target, descriptor.key, descriptor);
     }
   }   
})