Classs是es6提供的类,相当于es5的构造函数。

  写法: 

class Foo {
constructor () { // new 的时候会调用该方法,可以通过return改变构造函数的返回值
return Object.create(null)
}
}
let foo = new Foo()
//console.log(foo instanceof Foo) // false Foo为null // 类的实例对象
class People {
constructor () {
this.sex = 'man';
this.name = 'liming';
}
changeName (value) {
this.name = value;
}
} let person = new People();
console.log(person.hasOwnProperty('name')) // true hasOwnProperty 查看属性是否挂在对象本身
console.log(person.hasOwnProperty('changeName')) // false
console.log(person.__proto__.hasOwnProperty('changeName')) // true _proto_ 访问原型对象

  由上面的代码可以看出,Class与es5的构造函数大体相同。都使通过new关键字创建实例对象,Class中不在constructor中的方法均属于挂在原型上的方法。相当于functionname.prototype.funname1.

  Class不存在变量提升,使用Class之前,必须保证已经定义。

  Class的私有方法和私有属性 

let baz = Symbol('baz')
class Animal {
changeName (name) {
changeName.bind(this, name) // 私有 将方法移到外部创建
}
_setName () { // 私有 格式区分
}
[baz](baz){} // 利用Symbol创建私有方法
} function changeName(val) {
return this.name = val;
}

  创建私有方法有三种:

  • 通过方法名区分_。
  • 通过Symbol对象。
  • 将私有方法放到类的外部。

  Class中的this,


class A {
constructor(){
this.x = 1;
this.y = 2;
}
aa(){
return this.x
}
} let a = new A();
let {aa} = a;
console.log(aa()) // Cannot read property 'x' of undefined
console.log(a) // { x: 1, y: 2 }

  在上面的代码中a实例对象时可以调用a.aa()方法的,但是用解构赋值之后,调用aa()方法报错,输出实例对象a没有看到aa方法。

  理解原因,我们需要知道new的过程:

  1. 创建空对象
  2. 将构造函数的方法和属性挂在空对象上
  3. 将this指向空对象

  上面我们已经说过aa方法是挂在原型上的方法,并不是属于类A的。所以调用aa()会报错。下面我们将aa()方法挂在类的构造函数上面。

  

class A {
constructor(){
this.x = 1;
this.y = 2;
this.aa = this.aa.bind(this); // 这句可解决下面的问题
}
aa(){
return this.x
}
} let a = new A();
let {aa} = a;
console.log(aa()) // Cannot read property 'x' of undefined 原因解构赋值值读取对象本身的属性,不读取原型链
// 可以将 aa 函数放到constructor函数中 或者将方法重新绑定到this上
console.log(a) // { x: 1, y: 2, aa: [Function: bound aa] }

  Class的取值函数和存值函数。 

class B {
get prop () {
return 'getter'
}
set prop (val) {
console.log('shezhi' + val)
}
} var b = new B()
console.log(b.prop)
b.prop = 3;
console.log(b.prop)

  Class 的静态方法(不希望被实例对象继承的方法可以被类继承)。

 

class C{
static getname () { // 关键字static
return this.name; // 此this指向的是类而不是实例
}
} console.log(C.getname()) let c = new C()
//c.getname() // c.getname is not a function class D extends C { }
console.log(D.getname()) // D

  Class的静态属性。

  

/*
* class 的静态属性和实例属性
* 静态属性指的是挂在类上的属性不是实例上的(this上的)可以直接通过类访问到的
* 实例属性是实例对象上的属性
* */
class E{
//static num = 3; // 静态属性
//num = 3; // 实例属性
constructor () {
this.a = 4; // 实例属性
}
}
E.c = 5; // c 静态属性
console.log(new E().a)

  Class继承。

  

/*class 继承
es5 通过修改原型链继承
es6 通过extends实现继承*/ // es5
function ParentG() {
this.x = 1;
this.y = 2;
this.add = function () {
console.log(1)
}
} function childG() {}
childG.prototype = new ParentG(); // 通过改变原型对象实现继承
console.log(new childG().add()) // es6
class ParentH {
constructor () {
this.x = 21;
}
add () {
console.log(2)
}
} class childH extends ParentH { // extends 实现继承
}
console.log(new childH().x) // super 获取父类的this 必须在子类的构造函数中调用super() super内部的this指向子类的实例
class parentJ {
constructor () {
this.a = 1;
this.b = 2;
}
add () {
return 'add'
}
} class childJ extends parentJ{
constructor (a, b) {
super(a, b); // 继承的子类没有this必须调用super
this.c = 3;
}
add () {
console.log('子类' + super.add())
}
}
console.log(new childJ().add()) /*
* 区别 es5的继承只是改写子类的原型对象本质上子类和父类是独立的连个对象
* es6的继承只是对父类的改写或补充,子类没有this
* */ // Object.getPrototypeOf() 从子类上获取父类
let parentClass = Object.getPrototypeOf(childH)
console.log(parentClass) // [Function: ParentH] // 类的prototype 和 __proto__ 下面我们将这两个属性成为a和b
// es5 中每个对象都有a和b属性,对象的b属性指向创建对象的构造函数的a属性即构造函数的原型对象 function L() {}
let l = new L();
l.__proto__ == L.prototype; // es6 的Class 也具有prototype和__proto__属性
// 子类的__proto__ 属性表示构造函数的继承总是指向父类
// 子类的prototype属性的__proto__的属性表示方法的继承,总是指向父类的prototype
class ParentY {}
class ChildY extends ParentY {}
console.log(ChildY.__proto__ === ParentY) // true
console.log(ChildY.prototype.__proto__ === ParentY.prototype) // true // 继承的原理
Object.setPrototypeOf(ChildY.prototype, ParentY.prototype) // 子类的实例继承父类的实例
Object.setPrototypeOf(ChildY, ParentY) // 子类继承父类的静态属性 // setPrototypeOf 的实现方法
Object.setPrototypeOf = function (obj, proto) {
obj.__proto__ = proto;
return obj;
} // 子类作为对象时,子类的原型父类,作为构造函数,子类的原型对象时父类原型对象的实例(和es5实现继承一样)

 

详解Class的更多相关文章

  1. Linq之旅:Linq入门详解(Linq to Objects)

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  2. 架构设计:远程调用服务架构设计及zookeeper技术详解(下篇)

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  3. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  4. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  5. Android Notification 详解(一)——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  6. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  7. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  8. Drawable实战解析:Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  10. .NET应用和AEAI CAS集成详解

    1 概述 数通畅联某综合SOA集成项目的统一身份认证工作,需要第三方系统配合进行单点登录的配置改造,在项目中有需要进行单点登录配置的.NET应用系统,本文专门记录.NET应用和AEAI CAS的集成过 ...

随机推荐

  1. IPFS网络是如何运行的(p2p网络)

    IPFS是一个p2p网络,先来看看BitTorrent的p2p网络是如何工作的? 想要bt下载一个文件,首先你需要一个种子文件torrent,种子文件包含至少一个 Tracker(一台服务器地址)信息 ...

  2. const 相关知识 const和指针、const和引用

    以前老是对const概念不清不楚,今天算是好好做个笔记总结一下.以下内容包括1)常量指针(指针本身是常量),2)指针常量(指针指向的是常量对象),3)常量引用,4)const成员函数. 常量指针,指针 ...

  3. DOM生成XML文档

    import java.io.File; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuil ...

  4. Mycat 分片规则详解--ASCII 取模范围分片

    实现方式:该算法与取模范围算法类似,该算法支持数值.符号.字母取模.首先截取长度为 prefixLength 的子串,在对子串中每一个字符的 ASCII 码求和,然后对求和值进行取模运算(sum%pa ...

  5. 彻底弄懂CommonJS和AMD/CMD!

    JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...

  6. Zabbix常用key和自定义key的讲解

    zabbix中常用到的几个key: 1.监控端口的:net.tcp.port[,3306],可以在服务器端对被监控端测试. /usr/local/zabbix/bin/ -s192.168.8.120 ...

  7. Spring AOP 的proxy详解

    spring 提供了多种不同的方案实现对 bean 的 aop proxy, 包括 ProxyFactoryBean, 便利的 TransactionProxyFactoryBean 以及 AutoP ...

  8. Python中安装模块的方法

    1.*nix系统上有一个地方专门有一个地方来放置安装的Python模块 比如在Mac上,这个目录的路径为: /usr/lib/python2.7 将要安装的文件拷贝到这里即可 2.下载模块包,解压后, ...

  9. php中require、require_once、include、include_once类库重复引入效率问题详解

    首先我详细说下这四个引入函数 include() 与require() 的功能相同 唯一不同:require()不管是否被执行,只要存在,php在执行前都会预引入,include()则是执行到该语句时 ...

  10. C语言第七次作业

    一.PTA实验作业 题目1:求整数序列中出现次数最多的数 1.本题PTA提交列表 2.设计思路 定义一个整型数组a[1001],i,j 为循环变量,N,定义数组b[1001]={0} 输入N for( ...