[Javascript]Class该怎么用？

douzifly 发布于2019-08-23 18:34 / 2877人阅读

class

类这个东西原来只在我练习面试题和学习canvas的时候做一些小游戏时才会用到。直到一天要去读到同事写的代码，发现他大量地用到类。后来又在自学java的时候，终于明白。为什么在es6 Class终于要被提上进程了。

更好地组织代码

像我们在用Vue写页面的时候，我们会把数据存在data中，然后当中存放一些对象数据来代表我们页面中的组件内容。组件来操作这些数据。但当我们的页面内容越来越丰富之后，data会变得很庞大。当然为了操作这些data我们还需要有对应的methods来操作。慢慢的这个vue文件就会变得越来越难掌握。
这时候假如用class的思路想一下，一个组件或者一个局部的页面块。我们用class来处理，数据和操作方法存在实例本身。这样不仅减少了代码量。整体项目看起来，把握项目内容的难度也会减少。（其实就是vue文件与Vue的关系一样）

ES6 class

class这个其实是语法糖，在我们学习构造函数的时候，我们知道想要做出一样效果，我们需要

function People(name,age){
 this.name = name;
 this.age = age; 
}
// 假如需要添加函数还要
People.prototype.say=function（）{
    console.log("hello)
}

而class为我们提过了一个很简单的写法

    class People{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){
            console.log("hello)
        }
    }
    // 创造实例
    let a = new People("tom",23);

注意：class没有声明提升，声明必须写在前。而构造函数有声明提示。

constructor

constructor用来创建和初始化一个由class创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法。他用来接受class在被创建的时候传入的参。并且他本身负责构建属于他的数据结构。

static

static是class的静态方法。写法是：

 class Animal { 
  speak() {
    return this;
  }
  // 与其他方法同层
  static eat() {
    return this;
  }
}

class里的一般方法，一般用于调用或者修改操作实例里的数据。而静态方法一般与数据关系不大，是一个类的通用方法。调用方法也是直接在类中调用。

    //一般方法
    let obj = new Animal();
    obj.speak(); // Animal {}
    let speak = obj.speak;
    speak(); // undefined

    //静态方法
    Animal.eat() // class Animal
    let eat = Animal.eat;
    eat(); // undefined

extends

class可以继承class,就是所谓的大类小类。

// 先创建动物类
class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + " makes a noise.");
  }
}

// 再创建狗类，它继承动物类
class Dog extends Animal {
    constructor(){
        super();
    }
  speak() {
    console.log(this.name + " barks.");
  }
}

var d = new Dog("Mitzie");
d.speak();// "Mitzie barks."

super

首先，ES6 要求，子类的构造函数必须执行一次super函数。而super有两种用法。1，做函数。2，做对象。
1.super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

2.做对象。做对象时它指向父类的构造函数，可以调用它的静态方法，方法等。

class Human {
  constructor() {}
  static ping() {
    return "ping";
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + " pong";
  }
}
Computer.pingpong(); // "ping pong"

idc机房托管混合云 javascript该怎么学 javascript怎么用用js找class javascript脚本怎么用

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

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

和少妇白洁一起学JavaScript

摘要：我们已经回答了的构造函数和原型都是谁的问题，现在牵扯出来一个，我们继续检查的构造函数是全局对象上属性叫的对象的原型是个匿名函数，按照关于构造函数的约定，它应该是构造函数的属性我们给这个对象起个名字，叫。我不确定JavaScript语言是否应该被称为Object-Oriented，因为Object Oriented是一组语言特性、编程模式、和设计与工程方法的笼统称谓，没有一个详尽和大家...

DevTTL 2019-08-20 14:29 评论0 收藏0
Javascript中call的使用

摘要：中的使用自己感觉蛮纠结的，根据文档很好理解，其实很难确定你是否真正的理解。将被用作当前对象的对象。方法可将一个函数的对象上下文从初始的上下文改变为由指定的新对象。最基本的理解自定义一个类，该类有一个方法，用来显示当前对象的值。 Javascript中call的使用自己感觉蛮纠结的，根据文档很好理解，其实很难确定你是否真正的理解。 call 方法应用于：Function 对象调用一个...

Snailclimb 2019-08-19 17:28 评论0 收藏0
js温故而知新7(面向对象编程)——学习廖雪峰的js教程

摘要：不区分类和实例的概念，而是通过原型来实现面向对象编程。新创建的的原型链是也就是说，的原型指向函数的原型。最后，创建一个对象代码和前面章节完全一样小明继承用定义对象的另一个巨大的好处是继承更方便了。 JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。原型是指当我们想要创建xiaoming这个具体的学生时，我们并没有一个Student类型可用...

Jaden 2019-08-21 11:38 评论0 收藏0
详解javascript的类

摘要：原文地址详解的类博主博客地址的个人博客从当初的一个弹窗语言，一步步发展成为现在前后端通吃的庞然大物。那么，的类又该怎么定义呢在面向对象编程中，类是对象的模板，定义了同一组对象又称实例共有的属性和方法。这个等同于的属性现已弃用。。前言生活有度，人生添寿。原文地址：详解javascript的类博主博客地址：Damonare的个人博客 Javascript从当初的一个弹窗语言，一...

hufeng 2019-08-29 11:30 评论0 收藏0