申明:
此择要笔记系列是我近来看《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 的值
申明:同寄生组织函数形式,返回的对象与组织函数或许与组织函数的原型属性没有关系。
关于对象原型部份完毕。下一篇是继续相干的内容