class类

2017-07-11  本文已影响8人  codeSirCao

Es5呢 大家都知道jS是没有类的 但是JS通过利用构造函数new 实例化来模拟
ES6 呢 是只能说模拟的更加真实 基本可以说ES6 有一个class 类

eg:es5:

function Point(x, y) {
this.x = x;
this.y = y;
}

Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。

eg:ES6

提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
constructor方法----------构造方法,
this关键字------------------实例对象。
ES5 的构造函数Point--------对应 ES6 的Point类的构造方法(construtor)
[ES6 的类,完全可以看作构造函数的另一种写法]

prototype

事实上,类的所有方法都定义在类的prototype属性上面。

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

  toString() {
// ...
}

  toValue() {
// ...
 }
}

  // 等同于

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

【在类的实例上面调用方法,其实就是调用原型上的方法。】

Object.assign方法

可以一次添加多个方法

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

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

【注意】,类的内部所有定义的方法,都是不可枚举的(non-enumerable)。
但是Es5确实可以

class表达式

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

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

立即执行函数

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

 sayName() {
   console.log(this.name);
 }
}('张三');

person.sayName(); // "张三"

【注意】类不存在变量提升(hoist),这一点与 ES5 完全不同。

私有方法

私有方法是常见需求,但 ES6 不提供,只能通过变通方法模拟实现。
一种做法是在命名上加以区别。
eg:

  class Widget {
     foo (baz) {
       bar.call(this, baz);
    }

  // ...
 }

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

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

const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

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

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

 // ...
};

利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值。

this

绑定eg:

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

 // ...
}

Class 的取值函数(getter)和存值函数(setter)

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

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
 }

let inst = new MyClass();

 inst.prop = 123;
// setter: 123

inst.prop//getter

new.target 属性

new是从构造函数生成实例的命令。ES6 为new命令引入了一个new.target属性,该属性一般用在在构造函数之中,返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。
eg:必选使用new实例调用代码

 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中返回当前class
 class Rectangle {
     constructor(length, width) {
    console.log(new.target === Rectangle);
     this.length = length;
   this.width = width;
  }
 }

 var obj = new Rectangle(3, 4); // 输出 true

【注意】子类继承父类时,new.target会返回子类。

 class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle);
   // ...
  }
}

class Square extends Rectangle {
   constructor(length) {
    super(length, length);
  }
}

var obj = new Square(3); // 输出 false

【extends可以实现class的继承】
如果还想了解更深 可以点击http://es6.ruanyifeng.com/#docs/class

上一篇下一篇

猜你喜欢

热点阅读