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. 以太坊挖矿源码:ethash算法

    本文具体分析以太坊的共识算法之一:实现了POW的以太坊共识引擎ethash. 关键字:ethash,共识算法,pow,Dagger Hashimoto,ASIC,struct{},nonce,FNV ...

  2. java 三种工厂模式

    一.简单工厂模式 一个栗子: 我喜欢吃面条,抽象一个面条基类,(接口也可以),这是产品的抽象类. public abstract class INoodles { /** * 描述每种面条啥样的 */ ...

  3. 笔记:Struts2 国际化

    视图页面的国际化 在JSP页面中指定国际化资源需要借助<s:i18n-/>标签,如果把<s:i18n-/>标签作为<s:test-/>标签的父标签,则会直接加载父标 ...

  4. 使用TensorFlow实现回归预测

    这一节使用TF搭建一个简单的神经网络用于回归预测,首先随机生成一组数据 import tensorflow as tf import numpy as np import matplotlib.pyp ...

  5. 从 MVC 到前后端分离

    从 MVC 到前后端分离 1 理解 MVC MVC 是一种经典的设计模式,全名为 Model-View-Controller,即 模型-视图-控制器. 其中,模型 是用于封装数据的载体,例如,在 Ja ...

  6. C++模板入门教程(一)——模板概念与基本语法

    转载请保留以下声明 作者:赵宗晟 出处:http://www.cnblogs.com/zhao-zongsheng/ 前言 有些人提到C++模板就会下意识地觉得可怕.看不懂.避而远之.其实模板并不复杂 ...

  7. VMware 下快速克隆出多个 Linux 环境

    念念不忘,必有回响 好好工作,好好吃饭,困了倒头就睡:吃你认为好吃的,吃到饱:买贵的,你想买的:去玩去野: 就这样. 为什么要克隆多个 Linux 系统? 因为要玩阿. 其实也不是了,就是为了折腾嘛, ...

  8. 【译】Java、Kotlin、RN、Flutter 开发出来的 App 大小,你了解过吗?

    现在开发 App 的方式非常多,原生.ReactNative.Flutter 都是不错的选择.那你有没有关注过,使用不同的方式,编译生成的 Apk ,大小是否会有什么影响呢?本文就以一个最简单的 He ...

  9. 设计模式 --> (15)职责链模式

    职责链模式 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 示例 考虑员工要求加薪.公司的管理者一共有 ...

  10. java 二叉树排序

    1 class BinaryTree{ 2 class Node{ 3 private Comparable data; 4 private Node left; 5 private Node rig ...