js-ES6学习笔记-Class（6）

1、类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

2、父类的静态方法，可以被子类继承。静态方法也是可以从super对象上调用的。

3、静态属性指的是Class本身的属性，即Class.propname，而不是定义在实例对象（this）上的属性。

ES6明确规定，Class内部只有静态方法，没有静态属性。

// 以下两种写法都无效
class Foo {// 写法一prop: 2// 写法二static prop: 2
}Foo.prop // undefined

4、ES7有一个静态属性的提案，目前Babel转码器支持。

这个提案对实例属性和静态属性，都规定了新的写法。

（1）类的实例属性——类的实例属性可以用等式，写入类的定义之中。

class ReactCounter extends React.Component {constructor(props) {super(props);this.state = {count: 0};}
}

上面代码中，构造方法constructor里面，定义了this.state属性。

有了新的写法以后，可以不在constructor方法里面定义。

class ReactCounter extends React.Component {state = {count: 0};
}

（2）类的静态属性

类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了。

5、目前，有一个提案，为class加了私有属性。方法是在属性名之前，使用#表示。

6、new是从构造函数生成实例的命令。ES6为new命令引入了一个new.target属性，（在构造函数中）返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

function Person(name) {if (new.target !== undefined) {this.name = name;} else {throw new Error('必须使用new生成实例');}
}// 另一种写法
function Person(name) {if (new.target === Person) {this.name = name;} else {throw new Error('必须使用new生成实例');}
}var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

Class内部调用new.target，返回当前Class。需要注意的是，子类继承父类时，new.target会返回子类。

利用这个特点，可以写出不能独立使用、必须继承后才能使用的类。

class Shape {constructor() {if (new.target === Shape) {throw new Error('本类不能实例化');}}
}class Rectangle extends Shape {constructor(length, width) {super();// ...
  }
}var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

7、Mixin模式指的是，将多个类的接口“混入”（mix in）另一个类。可以将多个对象合成为一个类。使用的时候，只要继承这个类即可。

转载于:https://www.cnblogs.com/zczhangcui/p/6550570.html

js-ES6学习笔记-Class（6）相关推荐

ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
js/jquery学习笔记
javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档很详细,但是API部分单独 ...
ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...
ES6学习笔记02：let 与 const
ES6学习笔记02:let 与 const 用var声明的变量会造成全局污染,于是就产生了新的声明方式. 1.let 用let声明变量,必须先声明后使用. 在for循环头里用let定义循环变量i,那么 ...
ES6学习笔记01：Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...

js-ES6学习笔记-Class（6）

js-ES6学习笔记-Class（6）相关推荐

最新文章

热门文章