JS之理解ES6声明类class原理

daryl 发布于2019-08-20 18:19 / 2750人阅读

摘要：原理通过构造函数声明类通过的声明类原理首先得了解原型链的基础知识分析是一个类，也是一个函数是一个对象指向的是函数，该函数还挂了和属性将函数挂载的原型上。

ES6 class原理

1.通过构造函数声明类

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.通过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原理

首先得了解原型链的基础知识https://segmentfault.com/a/11...；

分析：①People是一个类，也是一个函数；②constructor是一个对象指向的是People函数，该函数还挂了name和age属性；③将say函数挂载People的原型上。

代码

let People = function(){ //第①步，创建People函数
 
 function People(name,age){//第②步，理解constructor就是指向People，People挂载着name和age两个属性
    this.name = name;
    this.age = age;}
   
 //将静态和动态的方法分别挂载在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对象上的方法挂载People上
     if(staticProps){defineProperties(Constructor,staticProps)}}
 
//定义对象属性     
let defineProperties =function(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
       Object.defineProperty(target, descriptor.key, descriptor);
     }
   }   
})

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84335.html

JS之理解ES6 继承extends

摘要：理解继承在中对继承有了更友好的方式。总的来说的的实质和以前的继承方式是一致的，但是有了更好的，更清晰的表现形式。理解ES6继承extends 1.在es6中对继承有了更友好的方式。在下面的继承中那到底在extends的时候做了什么，super()又是代表什么意思。 class People{ constructor(name, age) { this.name = name; ...

starsfun 2019-08-20 18:23 评论0 收藏0
ES6深入浅出 Classes

摘要：一步，一步前進一步深入浅出之。是构造函数，可在里面初始化我们想初始化的东西。类静态方法大多数情况下，类是有静态方法的。中添加类方法十分容易类方法和静态方法是同一个东西在的语法中，我们可以使用关键字修饰方法，进而得到静态方法。一步，一步前進の一步 ES6深入浅出之Classes。翻译的同时乱加个人见解，强烈推荐阅读原作者的文章，言简意赅。es6-classes-in-depth 类语...

array_huang 2019-08-23 10:45 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
校招社招必备核心前端面试问题与详细解答

摘要：本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案。网易阿里腾讯校招社招必备知识点。此外还有网络线程，定时器任务线程，文件系统处理线程等等。线程核心是引擎。主线程和工作线程之间的通知机制叫做事件循环。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文总结了前端老司机经常问题的一些问题并结合个...

DevTalking 2019-08-02 15:31 评论0 收藏0