JavaScript高等程序设计-择要笔记-3

申明:

此择要笔记系列是我近来看《JavaScript高等程序设计(第3版)》顺手所记。
内里分条列举了一些我以为主要的、须要记下的、对我有协助的点,是根据我看的递次来的。
择要笔记自身没有系统性,没有全面性可言,写在这里供有肯定基本的前端开发者参考交换。
内里的知识点、例子大部份来源于本书,或许延长出来的,都经由我的测试是对的,然则没方法保证100%准确,假如有人看到毛病的处所,愿望指出来,感谢。

对象原型的别的形式

1. 更简朴的原型语法

a. 重写组织函数的 prototype 属性

用这类要领假如不设置原型的 constructor 属性,则原型的 constructor 属性跟一般对象一样,指向 Object,
如:

var Person = function () {}
Person.prototype = {
  name: 'abc',
  sayHello: function () {
    console.log('hello')
  }
}
Person.prototype.constructor === Person // false
Person.prototype.constructor === Object // true

var ming = new Person()
ming.constructor === Person // false
ming.constructor === Object // true
ming.__proto__ === Person.prototype // true
ming instanceof Person // true
b. 设置原型的 constructor 属性

以后的表现跟在原生的原型对象上增加属性一样,
如:

var Person = function () {}
Person.prototype = {
  constructor: Person,
  name: 'abc',
  sayHello: function () {
    console.log('hello')
  }
}
Person.prototype.constructor === Person // true

var ming = new Person()
ming.constructor === Person // true
ming.__proto__ === Person.prototype // true
ming instanceof Person // true

然则,重设 constructor 属性会致使它的 [[Enumerable]] 特征被设置成 true,变成可罗列的。
这个题目可以用 Object.defineProperty() 来纠正。
如:

var Person = function () {}
Person.prototype = {
  name: 'abc',
  sayHello: function () {
    console.log('hello')
  }
}
Object.defineProperty(Person.prototype, 'constructor', {
  enumerable: false,
  value: Person
})

2. 原型的动态性

假如不重设组织函数的 prototype 原型对象,那末,我们对原型对象的任何修正都能够反应到实例上,纵然先建立实例后修正原型。

假如重设组织函数的 prototype 原型对象,那末,会割断新的原型对象和任何之前已存在的组织函数实例之间的联络,它们援用的仍然是最初的原型。

3. 组合运用组织函数形式和原型形式

建立自定义范例的最经常使用体式格局,就是组合运用组织函数形式和原型形式。组织函数用于定义实例属性,原型形式用于定义要领和同享的属性。

优点:每一个实例都邑有本身的实例属性的副本,同时又同享着对要领的援用,最大限制的节省了内存。
还支撑向组织函数通报参数。
如:

function Person (name, age) {
  this.name = name
  this.age = age
  this.friends = ['Ming', 'Li']
}
Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name)
  }
}

var zhang = new Person('zhang', 12)
var yang = new Person('yang', 15)
zhang.friends.push('wang')
console.log(zhang.friends) // ['Ming', 'Li', 'wang']
console.log(yang.friends) // ['Ming', 'Li']
zhang.sayName === yang.sayName // true

4. 动态原型形式

如:

function Person (name, age) {
  this.name = name
  this.age = age
  if (typeof this.sayName !== 'function') {
    Person.prototype.sayName = function () {
      console.log(this.name)
    }
  }
}
// 注重在用这类形式时,不能运用对象字面量重写原型。

5. 寄生组织函数形式

这类形式的基本思想就是建立一个函数,该函数的作用仅仅是封装建立对象的代码,然后再返回新建立的对象。但从外表看,这个函数很像组织函数。
如:

function Person (name, age) {
  var person = {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
  return person
}

var ming = new Person('ming', 12)
ming.sayName() // 'ming'
ming instanceof Person // false
ming instanceof Object // true
ming.__proto__ === Object.prototype // true
ming.constructor === Object // true

注重:这个形式除了运用new操作符并把包装的函数叫做组织函数外,跟工场形式是一摸一样的。
申明:返回的对象与组织函数或许与组织函数的原型属性没有关系。

6. 稳妥组织函数形式

(由于不运用new操作符,所以函数称号就不首字母大写了)

稳妥组织函数形式与寄生组织函数相似,但有两点差别:一是新建立的实例要领不援用this;二是不运用new操作符挪用组织函数。
如:

function person (name, age) {
  var o = {}
  o.sayName = function () {
    console.log(name)
  }
  return o;
}
var ming = person('ming', 12)
ming.sayName() // 'ming'
ming instanceof person // false
ming instanceof Object // true

注重:在这里除了挪用 sayName 要领,没有别的方法接见 name 的值
申明:同寄生组织函数形式,返回的对象与组织函数或许与组织函数的原型属性没有关系。

关于对象原型部份完毕。下一篇是继续相干的内容
    原文作者:wfc_666
    原文地址: https://segmentfault.com/a/1190000007787568
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞