ES6学习17 Class基本概念

最新推荐文章于 2022-03-18 12:00:11 发布
最新推荐文章于 2022-03-18 12:00:11 发布
阅读量271 收藏
点赞数
分类专栏： ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pspxuan/article/details/103116905
版权
此文参考学习于 阮一峰老师《ES6入门》，更多特性以及方法可以点击查看，也欢迎留言探讨。

1.简介

1.1.概述

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到
只是新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

ES6 的类，完全可以看作构造函数的另一种写法。

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

class Bar {
  doStuff() {
    console.log('stuff');
  }
}

var b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

也就是说，在类的实例上面调用方法，其实就是调用原型上的方法。

由于类的方法都定义在prototype对象上面， 所以可以使用Object.assign直接向原型上添加多个方法

Object.assign( target,sources ) 用来合并数组，返回一个目标对象（target）

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

若要往类被实例化后的对象中使用 Object.assign 方法，要添加在 __proto__ 上，如下。

class Point {
  constructor(){
    // ...
  }
}
var P = new Point() 
Object.assign(P.__proto__, { // 向实例化后的对象添加多个方法
  toString(){},
  toValue(){}
});

prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。

Point.prototype.constructor === Point // true

注意：类的内部所有定义的方法，都是不可枚举的（non-enumerable）。这一点与 ES5 的行为不一致。

1.2.constructor方法

类 通过new命令生成对象实例时，会自动调用类的默认方法 constructor
如果没有显式定义，JS会默认添加一个空的constructor方法。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

上面代码中，定义了一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。

constructor方法默认返回实例对象（即this），自己也可重新定义返回的对象（定义在实例化对象的本身）

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

上面代码中，constructor函数返回一个全新的对象，结果导致实例对象不是Foo类的实例。

注意：类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

1.3.类的实例

生成类的实例的写法，与 ES5 完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class，将会报错。

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。
看一个例子

//定义类
class Point {

  constructor(x, y) {
    this.x = x;//this指向实例化的对象
    this.y = y;//this指向实例化的对象
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')'; //方法定义在原型上，this 也指向实例化对象
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

Object.prototype.hasOwnProperty()指示对象自身属性中是否具有指定的属性
该方法会忽略掉那些从原型链上继承到的属性。

与 ES5 一样，相同类的所有实例共享一个原型对象。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__ //p1，p2共享一个实例对象
//true

这也意味着，可以通过实例的__proto__属性为“类”添加方法。

__proto__ 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__.printName = function () { return 'Oops' };

p1.printName() // "Oops"
p2.printName() // "Oops"

var p3 = new Point(4,2);
p3.printName() // "Oops"

上面代码在p1的原型上添加了一个printName方法，由于p1的原型就是p2的原型，因此p2也可以调用这个方法。而且，此后新建的实例p3也可以调用这个方法。这意味着，使用实例的__proto__属性改写原型，必须相当谨慎，不推荐使用，因为这会改变“类”的原始定义，影响到所有实例。

1.4.取值函数（getter）和存值函数（setter）

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter'; //返回值可以充当set的参数
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

存值函数和取值函数是设置在属性的 Descriptor 对象上的。

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }

  get html() {
    return this.element.innerHTML;
  }

  set html(value) {
    this.element.innerHTML = value;
  }
}

var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html"
);

"get" in descriptor  // true
"set" in descriptor  // true

1.5.属性表达式

类的属性名（包括方法），可以采用表达式。

let methodName = 'getArea';

class Square {
  constructor(length) {
    // ...
  }

  [methodName]() {
    // ...
  }
}

1.6.Class 表达式

与函数一样，类也可以使用表达式的形式定义。

const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};

上面代码使用表达式定义了一个类。需要注意的是，这个类的名字是Me，但是Me只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用。

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

如果类的内部没用到这个类名的话，可以省略Me，也就是可以写成下面的形式。

const MyClass = class { /* ... */ };

采用 Class 表达式，可以写出立即执行的 Class。

let person = new class {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}('张三');//传参
	
person.sayName(); // "张三"

上面代码中，person是一个立即执行的类的实例。里面的可以通过对象调用属性的方式来修改属性值

2.注意点

  • 严格模式：类和模块的内部，默认就是严格模式
  • 不存在变量提升：必须保证子类在父类之后定义。
new Foo(); // ReferenceError
class Foo {}
  • 具有name 属性：本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。
class Point {} //name属性总是返回紧跟在class关键字后面的类名。
Point.name // "Point"
  • Generator 方法：如果在类的某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。里面可以使用 yield 关键字
class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

Symbol.iterator方法返回一个 Foo 类的默认遍历器，for...of循环会自动调用这个遍历器。

  • this 的指向：类的方法内部（constructor）如果含有this，它默认指向类的实例。
    但是，必须非常小心，一旦单独使用该方法，很可能报错。
class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

上面代码中，printName方法中的this，默认指向Logger类的实例。
但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined，若不是严格模式，当下运行的环境是则是window），从而导致找不到print方法而报错。

解决方法：在构造方法中绑定this

class Logger {
  constructor() {
    this.printName = this.printName.bind(this); //使用bind方法固定this指向，这里的 this 一直指向实例化对象
    // bind 返回一个函数 ， 这也是与 call 和 apply 的区别
  }

  // ...
}

另一种解决方法是使用箭头函数。

class Obj {
  constructor() {
    this.getThis = () => this;//利用箭头函数特性返回 this 
  }
}

const myObj = new Obj();
myObj.getThis() === myObj // true  
//返回的 this 指向实例化对象

还有一种解决方法是使用Proxy（代理），获取方法的时候，自定义行为，自动绑定this。

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}

const logger = selfish(new Logger());

3.静态方法

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

class f{
	static foo(){console.log('1')}
} //定义了类 f ，类中定义了‘静态方法’ foo
var p = new f() //实例化这个类
f.foo()  // 1
//通过类本身来调用 foo 方法
p.foo()  // 报错
//通过实例化对象来调用 foo 方法

上面代码，因为 foo 方法用了 static 关键字，使得成为静态方法。所以 foo 方法不会被实例继承。只能通过类来调用。

注意：

  • 如果静态方法包含this关键字，这个this指的是类，而不是实例。
  • 静态方法可以与非静态方法重名。
  • 静态方法也是可以从super对象上调用的。
  • 父类的静态方法，可以被子类继承。
class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

4.实例属性的新写法

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。

  • 这种写法更加简洁也更加方便
class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

另一种写法是，这个属性也可以定义在类的最顶层，其他都不变。

class IncreasingCounter {
  _count = 0;// 可定义多个属性。这种写法与直接定义在 constructor 中是一样的。
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

5.静态属性

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

  • 这种写法的缺点就是很容易让人忽视定义的静态属性

现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

class Foo {
}
//定义静态属性
Foo.prop = 1;
Foo.prop // 1

目前，只有这种写法可行，因为 ES6 明确规定，Class 的内部只有静态方法，没有静态属性。

现在有一个提案提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

6.new.target 属性

new是从构造函数生成实例对象的命令。

ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。
如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

function Person(name) {
  if (new.target !== undefined) { //若是没有使用 new 命令，则报错
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}

// 另一种写法
function Person(name) {
  if (new.target === Person) {  //若是没有使用 new 命令，则报错
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}

var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

上面代码确保构造函数只能通过new命令调用

  • 如果在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);  // 正确

上面代码中，Shape类不能被实例化，只能用于继承

7.私有方法和私有属性

现有的解决方案

私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。
这是常见需求，有利于代码的封装，但 ES6 不提供，只能通过变通方法模拟实现。

  • 一种做法是在命名上加以区别。但这并不保险，外部也可以调用这个方法。
class Widget {

  // 公有方法
  foo (baz) {
    this._bar(baz);
  }

  // 私有方法
  _bar(baz) {
    return this.snaf = baz;
  }

  // ...
}

上面代码中，_bar方法前面的下划线，表示这是一个只限于内部使用的私有方法。

  • 另一种就是将私有方法移出模块，因为模块内部的所有方法都是对外可见的。
class Widget {
  foo (baz) {
    bar.call(this, baz); //调用 bar ，并改变this指向，this指向class的实例化后的对象
  }

  // ...
}

function bar(baz) {
  return this.snaf = baz;
}

上面代码中，foo是公开方法，内部调用了bar.call(this, baz)。这使得bar实际上成为了当前模块的私有方法。

  • 还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值。
const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }

  // ...
};

上面代码中，bar和snaf都是Symbol值，一般情况下无法获取到它们，因此达到了私有方法和私有属性的效果。但是也不是绝对不行，Reflect.ownKeys()依然可以拿到它们。

私有属性的提案

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

class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}

上面代码中，#count就是私有属性，只能在类的内部使用（this.#count）。如果在类的外部使用，就会报错。
这种写法不仅可以写私有属性，还可以用来写私有方法。

  • 另外，私有属性也可以设置 getter 和 setter 方法。
class Counter {
  #xValue = 0;

  constructor() {
    super();
    // ...
  }

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
  }
}

上面代码中，#x是一个私有属性，它的读写都通过get #x()和set #x()来完成。

8.总结

ES6 class 的出现为 JS 模块化编程了更方便的编程方式，阅读起来也更加简洁。也更加贴近传统的面向对象编程

这一次学习class，内容不多，也比较简单，下面来总结一下知识点

  1. 类（class）的数据类型就是函数，与 ES5 一样，类本身就 指向构造函数。可直接使用new命令。

  2. 定义类的方法，只会在 prototype 上，所以说，在类的实例上面调用方法，其实就是调用原型上的方法。

  3. 类的内部所有定义的方法，都是不可枚举的

  4. 类必须使用new调用，否则会报错。

  5. 一个类默认生成constructor方法（为空）,可以自己定义。默认返回实例对象（即this）。可以指定返回其它对象

  6. 与 ES5 一样，类的所有实例共享一个原型对象。

  7. “类”的内部可以使用get和set关键字，拦截该属性的存取行为。get与set都设置在属性的 Descriptor 对象上

  8. 类的属性名，可以采用 ES6 属性名表达式。

  9. class 具关键字static，表示当前属性为静态属性

注意点：可查看本次笔记 第 2 大点

pspxuan
关注
专栏目录
ES6--class类（详解/看完必会）
蜗牛~~
02-22 1万+
ES6中class类的学习，看完必会
ES6 的Class的基本语法,静态方法, 实例属性新写法
yangyang_A的博客
05-25 695
文章目录Class的基本语法1.0 简介1.1 constructor 方法1.2 类的实例1.3 取值函数(getter)和存值函数(setter)1.4 属性表达式1.5 Class 表达式1.6 注意点2.0 静态方法3.0 实例属性的最新写法4.0 静态属性5.0 私有方法和私有属性6.0 new.target属性总结: Class的基本语法 1.0 简介 ES6之前, JavaScript 语言中, 生成实例对象的方法是 通过构造函数, 下面是一个例子: function Point(x, y
17、class的基本语法和继承
Slueia的博客
11-30 118
一、类的基本概念 ES6 的类，完全可以看作构造函数的另一种写法。 注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。 类的数据类型就是函数，类本身就指向构造函数。 构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。 prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。 Point.p
挖坑ECMAScript6-class
一朵翔云的博客
07-03 254
说明 ES6引入了 Class（类）这个概念，作为对象的模板，通过class关键字，可以定义类。 示例 //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; ...
Java Reference详解
weixin_33975951的博客
01-24 939
2019独角兽企业重金招聘Python工程师标准>>> ...
prototype和__proto__的区别
puddingcsdn的博客
09-15 277
prototype和__proto__的区别： 1.prototype是函数才有的属性 2.__proto__是每个对象都有的属性 它不是一个规范属性，该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它。__proto__属性已在ECMAScript 6语言规范中标准化，用于确保Web浏览器的兼容性，因此它未来将被支持。它已被不推荐使用, 现在更推荐使用Object.getPrototypeOf/Reflect.getPrototypeOf和Object.setPrototypeOf/Refle
从__proto__理解prototype
ZheYuLongYun的专栏
10-19 565
“every object has a prototype” 原以为很简单的一句，曾经缺没有真正理解，这里再整理一下。 function Cat(){     this.name="cat"; } Cat.prototype.say=function(){     console.log("i am a "+this.name); } var c=new Cat();
React+ ES6 Class基本用法
04-21
首先，让我们了解React组件的基本概念。在React中，组件是构建用户界面的基本单元，可以想象为自包含的独立模块。使用ES6 Class创建React组件，你需要继承React.Component基类，并实现render()方法。例如： ```jsx ...
js代码-es6 class测试
07-15
`class`并不是JavaScript中的新概念，它实际上是对现有原型继承机制的一种语法糖，使得代码更加接近传统的类式语法。在"js代码-es6 class测试"这个主题中，我们将深入探讨`class`的使用以及相关的知识点。 首先，让...
ES6新特性 Class 类的全方面理解
圆圆的 JavaScript 博客
10-20 988
javascript语言只有对象，没有类的概念。跟传统的面向对象语言（比如 C++ 和 Java）差异很大，非常容易让人困惑~ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念！本文就带你全方面理解class~
es6笔记·····Class
齐枫的博客
11-06 773
Class 的基本语法 简介 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.
ES6 类(Class)基本用法和静态属性+方法详解
热门推荐
pcaxb的专栏
12-20 11万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例: //Person.js function Person(x,y){ this
es6 Class 的 this 指向
歪脖先生的博客
02-01 6339
Class 的 this 指向 ES6 类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。 class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); }}const
ES6中的class类
a361457200的博客
12-06 1373
深入了解了一下js中的class，整理了笔记
es6 class this指向 (二)
qq_42928070的博客
05-25 184
class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); } } const logger = new Logger(); const { printName } = logger; printName(); // TypeError: Cannot read property 'print' of undefined
Class的基本用法和继承
weixin_34275734的博客
11-30 3020
简介 JavaScript语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x,y){ this.x = x; this.y = y; } Point.prototype.toString = function(){ return '(' + this.x + ', ' ...
vue 3.0 Proxy的使用
qq_38743783的博客
03-18 8629
一个 Proxy 对象包装另一个对象并拦截诸如读取/写入属性和其他操作，可以选择自行处理它们，或者透明地允许该对象处理它们。 语法： let proxy = new Proxy(target, handler) target —— 是要包装的对象，可以是任何东西，包括函数。 handler —— 代理配置：带有“钩子”（“traps”，即拦截操作的方法）的对象。比如 get 钩子用于读取target属性，set 钩子写入 target 属性等等。 对 proxy 进行操作，如果在 handler 中存
（转）理解 es6 class 中 constructor 方法 和 super 的作用
CaseyWei
07-02 422
首先，ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return '(' + this.x + ',' + this.y + ')'; } 等同于 class Point { constructor(x, y) { ..
"JavaScript及ES6学习笔记分享：从语言简介到应用领域概述
综合而言，JavaScript是一种重要的前端开发语言，学习它需要掌握基本的语法和特性，同时也需要关注ES6作为其新的标准的变化和新增特性。通过认真学习和实践，初学者可以逐步掌握JavaScript的核心知识，从而能够熟练...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值