es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析

本文实例讲述了es6中class类静态方法,静态属性,实例属性,实例方法。分享给大家供大家参考,具体如下:

es6新增了一种定义对象实例的方法,使用class关键字定义类,与class相关的知识点也逐步火热起来,但是部分理解起来相对抽象,简单对class相关的知识点进行总结,更好的使用class。对于基本概念,请参见阮一峰老师的es6入门教程。本文主要总结class静态相关。

关于类有两个概念,1,类自身,;2,类的实例对象

总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是静态属性的核心。

难点1:静态方法的理解

class Foo {
 static classMethod() {
  return 'hello';
 }
}

静态方法使用:在方法前加上static关键字

为什么使用静态方法:阻止方法被实例继承,类的内部相当于实例的原型,所有在类中直接定义的方法相当于在原型上定义方法,都会被类的实例继承,但是使用static静态方法定义的不会被实例继承,而且可以被实例直接应用Foo.classMethod(),此时写成new Foo.classMethod()会提示不存在此方法

静态方法中this指向:this指向类而不是类的实例

class Foo {
 static bar () {
  this.baz();
 }
 static baz () {
  console.log('hello');
 }
 baz () {
  console.log('world');
 }
}
Foo.bar() // hello

继承相关:静态方法可以被子类继承,也可以被super调用

难点2:静态属性的理解,以及和实例属性的区别

理解了静态的本质就知道静态属性是class类自身的属性

相对的实例属性是指类的实例的属性,调用时使用 new Foo().'属性名'

定义实例属性的方法:2种

类的实例属性可以用等式,写入类的定义之中

1,在类中定义

class MyClass {
 myProp = 42;
 constructor() {
  console.log(this.myProp); // 42
 }
}
//上面代码中,myProp就是MyClass的实例属性。在MyClass的实例上,可以读取这个属性。

2,在constructor中定义(react中经典写法)

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

定义静态方法,

1,就和普通的Object添加属性一样,object.a = a;(目前唯一一种方法)

缺点:老写法的静态属性定义在类的外部。整个类生成以后,再生成静态属性。容易忽略

2,静态属性的提案: 相对于实例方法定义,在定义实例方法的前面加上static关键字,该方法未发布

class MyClass {
 static myStaticProp = 42;
 constructor() {
  console.log(MyClass.myStaticProp); // 42
 }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • ES6 class类链式继承,实例化及react super(props)原理详解

    本文实例讲述了ES6 class类链式继承,实例化及react super(props)原理.分享给大家供大家参考,具体如下: class定义类是es6提供的新的api,比较直观,class类继承也有着一定的规律性,在egg, webpack等库的源码中有着很多的应用场景.结合一些初学者可能遇到的难点,本文主要对其链式继承进行总结,关于super关键字的使用请参考我的其他文章es6中super关键字的理解. class定义 class App { constructor(options){ su

  • ES6中Class类的静态方法实例小结

    本文实例讲述了ES6中Class类的静态方法.分享给大家供大家参考,具体如下: 以前看过的es6的东西,又忘了,再总结下: 类相当于实例的原型,所有在类中定义的方法,都会被实例继承.如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为"静态方法" class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new

  • ES6中class类用法实例浅析

    本文实例讲述了ES6中class类用法.分享给大家供大家参考,具体如下: 类语法是ES6中新增的一个亮点特色.我们熟悉的JavaScript终于迎来了真正意义上的类.在之前,想要通过javascript来实现类,通常会采用如下构造函数的模式: function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ['Shelby','Court']; } Person.pro

  • ES6 javascript中class静态方法、属性与实例属性用法示例

    本文实例讲述了ES6 javascript中class静态方法.属性与实例属性用法.分享给大家供大家参考,具体如下: 类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承. 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为" 静态方法". class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo

  • JavaScript ES6的新特性使用新方法定义Class

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加

  • JavaScript ES6中CLASS的使用详解

    前言 对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成"构造函数"的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • ES6 javascript中class类的get与set用法实例分析

    本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

  • ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

    本文实例讲述了ES6新特性之类(Class)和继承(Extends)相关概念与用法.分享给大家供大家参考,具体如下: 一.类(Class) 1.基本语法 JavaScript语言的传统方法是通过构造函数,定义并生成新对象.下面是一个例子 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'

  • 深入浅析ES6 Class 中的 super 关键字

    以下只是个人的学习笔记: super这个关键字,既可以当作函数使用,也可以当作对象使用.在这两种情况下,它的用法完全不同. 1.当作函数使用 class A {} class B extends A { constructor() { super(); //ES6 要求,子类的构造函数必须执行一次super函数. } } 注意,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.construc

随机推荐