JavaScript高级程序设计－摘要笔记－2

摘要：说明此摘要笔记系列是我最近看高级程序设计第版随手所记。其中，描述符对象的属性必须是设置其中一个或多个值，可以修改对应的特性值。如支持的浏览器，可以取得指定属性的描述符。

说明：

此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。
里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点，是按照我看的顺序来的。
摘要笔记本身没有系统性，没有全面性可言，写在这里供有一定基础的前端开发者参考交流。
里面的知识点、例子大部分来源于本书，或者延伸出来的，都经过我的测试是对的，但是没办法保证100%正确，如果有人看到错误的地方，希望指出来，谢谢。

Math.E // 2.718281828459045 自然对数的底数，即常量 e 的值
Math.PI // 派的值 3.141592653589793
Math.min() // 一组数中的最小值
Math.max() // 一组数中的最大值
// 取得数组中最大值的办法
var arr = [10, 15, 8, 23]
var max = Math.max.apply(Math, arr)
console.log(max) // 23
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入取整
Math.random() // 返回大于等于0小于1的随机数
Math.abs(num) // 返回 num 的绝对值
Math.log(num) // 返回 num 的自然对数
Math.pow(num, power) // 返回 num 的power次幂
Math.sqrt(num) // 返回 num 的平方根
Math.cos(x) // 返回 x 的余弦值
Math.sin(x) // 返回 x 的正弦值
Math.tan(x) // 返回 x 的正切值
Math.acos(x) // 返回 x 的反余弦值
Math.asin(x) // 返回 x 的反正弦值
Math.atan(x) // 返回 x 的反正切值
Math.atan2(y, x) // 返回 y / x 的反正切值

var rel = JSON.parse(JSON.stringify(obj))

var obj = {a: 1}
var copy = {b: 3}
var rel = Object.assign(b, obj)
console.log(rel) // {a: 1, b: 3}
copy === rel // true

假如需要深度拷贝的话，仍旧需要使用别的而不是本方法。因为 Object.assign() 拷贝的是在 source 里是对象的属性的引用而不是对象本身。如：

var a = {b: 3, c: {e: 5}}
var rel = Object.assign({}, a)
console.log(rel.c.e) // 5
a.c.e = 8
console.log(rel.c.e) // 8
// 合并 objects
var o1 = {a: 2}
var o2 = {b: 5}
var o3 = {c: 8}
var rel = Object.assign(o1, o2, o3)
console.log(rel) // {a: 2, b: 5, c: 8}
console.log(o1) // {a: 2, b: 5, c: 8}
rel === o1 // true
// 继承属性和不可枚举属性是不能拷贝的
// 原始类型会被包装为 object

ECMAScript 中有两种属性：数据属性和访问器属性

a. 数据属性：数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性。

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

要修改属性默认的特性，需要通过 es5 的 Object.defineProperty() 方法。这个方法接受三个参数，属性所在的对象，属性的名字和一个描述符对象。
其中，描述符 (descriptor) 对象的属性必须是：configurable, enumerable, writable, value. 设置其中一个或多个值，可以修改对应的特性值。如：

var person = {}
Object.defineProperty(person, "name", {
  writable: false,
  value: "abc"
})
person.name // "abc"
person.name = "wfc" // 严格模式下会报错
person.name // "abc"

在调用 Object.defineProperty() 方法时，如果不指定，configurable, writable, enumerable 的默认值都是 false。

可以多次调用 Object.defineProperty() 来修改同一个属性，但是在把 configurable 特性设置为 false 之后，
就只能把 writable 从 true 改成 false，其它设置都会报错。

b. 访问器属性

访问器属性不包含数据值，它们会包含一对 getter setter 函数（都不是必须的）。在读取访问器属性时，会调用 getter 函数，这个函数负责返回有效的值；
在写入访问器属性时，会调用 setter 函数并传入新值，这个函负责决定如何处理数据。访问器属性有如下4个特性：

[[Configurable]]: 表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。
对于直接在对象上定义的属性，默认值 true 。
[[Enumerable]]: 表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，默认值 true 。
[[Get]]: 在读取属性时调用的函数。默认值 undefined 。
[[Set]]: 在写入属性时调用的函数。默认值 undefined 。

访问器属性不能直接定义，必须使用 Object.defineProperty() 来定义。如：

var book = {
  _year: 2016,
  edition: 1
}
Object.defineProperty(book, "year", {
  get: function () {
    return this._year
  },
  set: function (newValue) {
    this.edition += 1
    this._year = newValue
  }
})
book.edition // 1
book.year = 2017
book.edition // 2

不必要同时指定 getter setter , 只指定 getter 意味着属性不能写，只指定 setter 意味着属性不能读

// 支持 Object.defineProperty() 的浏览器 IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome

第二个参数是描述符。如：

var book = {}
Object.defineProperties(book, {
  _year: {
    value: 2016,
    writable: true
  },
  edition: {
    value: 1,
    writable: true
  },
  year: {
    get: function () {
      return this._year
    },
    set: function (value) {
      this._year = value
      this.edition += 1
    }
  }
})
// 支持 Object.defineProperties() 的浏览器 IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome

只能取得实例属性的描述符，要取得原型对象的描述符，要在原型对象上调用这个方法。
如上例中的 book ：

Object.getOwnPropertyDescriptor(book, "_year") // {configurable: false, enumerable: false, writable: true, value: 2016}
var rel = Object.getOwnPropertyDescriptor(book, "year")
console.log(rel)
// {
//   configurable: false,
//   enumerable: false,
//   get: function () {
  //   return this._year
  // },
  // set: function (value) {
  //   this._year = value
  //   this.edition += 1
  // }
// }
typeof rel.get // "function"
// 支持 Object.getOwnPropertyDescriptor() 的浏览器 IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
var ming = new Person("ming", 13)

Person.prototype.constructor === Person // true
ming.constructor === Person // true
Person.constructor === Function // true
Function.constructor === Function // true
Function instanceof Function // true
Function instanceof Object // true

Person.prototype.sayHello = function () {
  console.log("hello")
}
ming.sayHello() // "hello"
ming.__proto__.constructor === Person // true
ming.__proto__ === Person.prototype // true

构造函数与其它函数唯一的区别在于调用方式的不同，不存在定义构造函数的特殊语法。如果不通过 new 操作符来调用，那它跟普通函数没有区别。如上面的例子：

var li = new Person("li", 15)
li.sayName() // "li"

Person("yang", 18)
window.sayName() // "yang"

var o = {}
Person.call(o, "wang", 20)
o.sayName() // "wang"

我们创建的每个函数都有一个 prototype(原型) 属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含所有实例共享的属性和方法。如：

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
Person.prototype.sayHello = function () { console.log("hello") }
var ming = new Person("ming", 12)
var li = new Person("li", 15)
ming.sayHello === li.sayHello // true
ming.sayHello === Person.prototype.sayHello // true

可以通过 isPrototypeOf() 方法来确定对象直接是否存在 原型－实例 关系，如：

Person.prototype.isPrototypeOf(ming) // true

es5 新增方法 Object.getPrototypeOf() 这个方法返回实例的 proto 即实例的构造函数的原型的值，如：

Object.getPrototypeOf(ming) === Person.prototype
// 支持 Object.getPrototypeOf() 的浏览器 IE 9+，Firefox 3.5+, Safari 5+, Opera 12+, Chrome

ming.hasOwnProperty("sayHello") // false
"sayHello" in ming // true
ming.hasOwnProperty("sayName") // true
"sayName" in ming // true

ming.sayHello = function () {
  console.log("hello in self")
}
ming.hasOwnProperty("sayHello") // true
"sayHello" in ming // true
delete ming.sayHello
ming.hasOwnProperty("sayHello") // false
"sayHello" in ming // true

ming.hasOwnProperty("sayHello1") // false
"sayHello1" in ming // false

即使将实例属性设置为 undefined / null , hasOwnProperty() in 这两个方法仍然返回 true

function hasPrototypeProperty (object, name) {
  return !object.hasOwnProperty(name) && name in object
}

for-in 循环返回的是所有能够通过对象访问的、可枚举的(enumerable: true)属性，既包括实例中的属性又包括原型中的属性。

var Person = function () {}
Person.prototype.sayHello = function () {
  console.log("hello")
}
var ming = new Person()
ming.name = ming
Object.keys(ming) // ["name"]

Object.getOwnPropertyNames() 方法可以得到所有实例属性，包括不可枚举的。
// 支持 Object.keys() 和 Object.getOwnPropertyNames() 的浏览器 IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome