JavaScript中的类class

1. ES5中的近类结构

ES5中创建类的方法：

新建一个构造函数，定义一个方法并且赋值给构造函数的原型。

//新建构造函数，大写字母开头
function Person(name) {
    this.name = name;
}
//定义一个方法并赋值给构造函数的原型
Person.prototype.sayName = function() {
    return this.name;
}
var p = new Person('Tom');
console.log(p.sayName());

2. ES6中的class

class Person {
    //新建构造函数
    constructor(name) {
        this.name = name;//私有属性
    }
    //定义一个方法并赋值给构造函数的原型
    sayName() {
        return this.name;
    }
}
let p = new Person('Tom')
console.log(p.sayName())

与ES5中使用构造函数不同的是，私有属性是实例中的属性，不会出现在原型上。

类声明和函数声明的区别和特点：

1、函数声明可以被提升，类声明不能提升(与let声明类似)。

2、类声明中的代码自动强行运行在严格模式下。

3、类中的所有方法都是不可枚举的，而自定义类型中，可以通过Object.defineProperty()手工指定不可枚举属性。

4、每个类都有一个[[construct]]的方法。

5、只能使用new来调用类的构造函数。

6、不能在类中修改类名。

类表达式

类有声明式和表达式两种表现形式：

//声明式
class B {
    constructor(){}
}
//匿名表达式
let A = class {
    construnctor(){}
}
//命名表达式，B可以在外部使用，B1只能在内部使用
let B = class B1 {
    constructor(){}
}

3. 类的应用场景

JavaScript函数是一等公民，类也设计成一等公民。

(1) 类作为参数传入函数

let A = class {
    sayName() {
        return 'Tom'
    }
}
//该函数返回一个类的实例
function test(classA) {
    return new classA()
}
//给test函数传A
let t = test(A)
console.log(t.sayName)

(2) 通过立即执行函数，调用类构造函数创建单例

用new调用类的表达式，接着()调用表达式

let a = new class {
    constructor(name) {
        this.name = name
    }
    sayName() {
        return this.name
    }
}('Tom')
console.log(a.sayName())

4. 类的静态成员

静态成员是指在方法名或属性名前面加上static关键字，和普通方法不一样的是，static修饰的方法不能在实例中访问，只能用类名直接访问。

class A {
    constructor(name) {
        this.name = name
    }
    static create(name) {
        return new A(name)
    }
}
let a = A.create('TOM')
console.log(a.name)//TOM
let t = new A()
console.log(t.create('Tom'))//t.create is not a function

5. 继承与派生

比如自定义react组件要继承React.Component

class A extends React.Component {
    constructor(props){
        super(props)
    }
}

A是派生类，在派生类中使用构造方法必须使用super.

关于super使用的几点要求：

1、只可以在派生类中使用super。派生类是指继承自其它类的新类。
2、在构造函数中访问this之前要调用super()，负责初始化this。

(1)在继承的类中重写父类方法

class Component {
    constructor([a,b] = props) {
        this.a = a
        this.b = b
    }
    add() {
        return this.a + this.b
    }
}
class T extends Component {
    constructor(props){
        super(props)
    }
    //重写父类方法add
    add() {
        return this.a * this.b
    }
}
let t = new T([2,3])
console.log(t.add())//6

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。