lambda表达式中this的指向

  1. class Circle {
  2.   constructor(radius) {
  3.     this.radius = radius;
  4.       this.perimeter = ()=>2*Math.PI*this.radius;
  5.   }
  6.   diameter() {
  7.     return this.radius * 2;
  8.   }
  9.   toString() {
  10.     return '(' + this.radius + ')';
  11.   }
  12. }
  14. var cir1 = new Circle(10);
  16. cir1.perimeter()
  17. > 62.83185307179586
  18. cir1.diameter();
  19. > 20
  21. var {diameter} = cir1;
  22. diameter();
  23. > VM1041:7 Uncaught TypeError: Cannot read property 'radius' of undefined
  24. var {perimeter} = cir1;
  25. perimeter();
  26. > 62.83185307179586

解构赋值

class Chameleon {
  colorChange(newColor) {
    this.newColor = newColor;
  }

  constructor({ newColor = "green" } = { newColor: "red" }) {
    this.newColor = newColor;
  }
}

var freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");

访问器属性

ECMA-262第五版定义了一些特性来描述属性的各种特征，这些特性是为了实现javascript引擎用的，属于内部值，因此不能直接访问他们。

ECMAScript中有两种属性：数据属性和访问器属性。
数据属性：数据属性包含一个数据值的位置，在该位置可以读取和写入值。数据属性有4个描述其行为的特性。

  • [[Configurable]] : 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性；
  • [[Enumerable]] : 表示能否通过for-in循环返回属性；
  • [[Writable]] : 表示能否修改属性的值；
  • [[Value]] : 包含这个属性的数据值，读取属性值的时候，从这个位置读，写入属性值的时候，把新值保存在这个位置。默认值为undefined。

访问器属性：该属性不包含数据值，包含一对getter和setter函数。访问器属性有如下4个特性：

  • [[Configurable]] : 表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性；
  • [[Enumerable]] : 表示能否通过for-in循环返回属性；
  • [[Get]] : 在读取属性时调用的函数，默认值是undefined；
  • [[Set]] : 再写入属性时调用的函数，默认值是undefined。

因为无法直接访问这些值，所以ECMA提供了两个API让我们来修改他们。(writable/value和get/set不能同时存在)

  • [Object.create](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
  • Object.defineProperty

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

下面是例子

var obj = Object.create(Object.prototype, {foo: { 
    configurable:true,
      enumerable: false,
      writable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    enumerable: true,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }})

https://juejin.im/post/5d0644976fb9a07ed064b0ca?utm_source=gold_browser_extension