对象原型

参考 - MDN

Javascript中的原型

在Javascript中,每一个函数都有一个特殊的属性,叫做原型

下面获取函数的原型fn.prototype

function f1(){}
console.log(f1.prototype)
/*{constructor: f f1()__proto__:{constructor: f Object()__defineGetter__: f __defineGetter__()__defineSetter__: f __defineSetter__()hasOwnProperty: f hasOwnProperty()__lookupGetter__: f __lookupGetter__()__lookupSetter__: f __lookupSetter__()isPrototypeOf: f isPrototypeOf()...}}
*/

下面给函数的原型添加属性fn.prototype.hello = 'world'

function f1(){}
f1.prototype.hello = 'world'
console.log(f1.prototype)
/*{hello: "world"constructor: f f1()__proto__: Object}
*/

创建一个函数的实例new fn(),并给实例添加属性

function Person(){}
Person.prototype.hello = 'world'
var p1 = new Person()
p1.say = 'hi'
console.log(p1)
/*{say: "Hi"__proto__:{hello: "world"constructor: f Person()__proto__: Object}}
*/

浏览器访问某个属性的寻找顺序:

首先会寻找这个实例是否含有该属性
如果有则返回,否则会通过__proto__寻找该实例的原型Person.prototype上是否含有该属性.
如果有则返回,否则会通过__proto__.__proto__的上寻找该属性.
如此循环.到最后__proto__.__proto__. ... = undefined则返回undefined

理解原型对象

下面定义一个构造器函数

function Person(first, last, age, gender, interests){this.first = firstthis.last = lastthis.age = agethis.gender = genderthis.interests = interests
}
var p1 = new Person("Li","Bruce",18,'男','coding')
console.log(p1.__proto__ === Person.prototype) // true
console.log(p1.__proto__.__proto__ === Object.prototype) // true
console.log(p1)
/*{first: "Li"last: "Bruce"age: 18gender: "男"interests: "coding"__proto__:{constructor: f Person(first, last, age, gender, interests)__proto__:{constructor: f Object()__defineGetter__: f __defineGetter__()...valueOf: f valueOf()...}}}
*/

此时存在一条原型链:

__proto__

Person.prototype

Object.prototype

此时,调用如下:

p1.valueOf()

根据前面的规则:

浏览器首先检查,p1对象是否含有valueOf()方法
如果没有,则浏览器检查p1对象的原型对象(Person.prototype, 通过浏览器提供的__proto__访问)是否具有可用的valueOf()方法
如果还没有,浏览器会检查Person()构造函数的prototype属性所指向的对象的原型对象(Object.prototype)是否含有该方法,如果有则返回,否则返回undefined

原型链中的方法和属性没有被复制到其他对象 – 它们被访问需要通过"原型链"的方式

官方并未提供__proto__属性,在JavaScript语言标准中用[[prototype]]表示.然而,大多数现代浏览器还是提供了一个名为__proto__的属性.

prototype属性: 继承成员被定义的地方

查看MDN - Object可以看到,Object有很多属性,但是在上面的p1中,并不是全部都继承了.

原因在于: 被继承的属性仅仅只是定义在Object.prototype上的属性.定义在Object本身上的属性是不会被继承的

看下面的栗子:

function Person(){}
console.log(Person.prototype)
/*{constructor: f Person()__proto__: Object}
*/

默认情况下,构造器(此处为Person)的prototype属性初始为空白.

静态成员与实例成员

静态成员: 在构造函数本身上添加的成员
实例成员: 构造函数内部通过this添加的成员,只能通过实例化的对象来访问

function Person(name, age){this.name = namethis.age = age
}
Person.sex = '男'
var p1 = new Person('Marron', 18)
// name、age就是实例成员
// sex就是静态成员

使用prototype的好处

节约内存.例如下述:

function Person(name, age){this.name = namethis.age = agethis.sayHi = function(){console.log('Hi ~')}
}
var p1 = new Person('Mar', 18)
var p2 = new Person('Marron', 19)

上面通过构造函数,生成了2个实例化对象,但是两个实例化对象的方法的内存地址是不同的.

console.log(p1.sayHi == p2.sayHi)  // false

引用prototype属性可以节约内存

function Person(name, age){this.name = namethis.age = age
}
Person.prototype.sayHi = function(){console.log('Hi ~')
}
var p1 = new Person('Mar', 18)
var p2 = new Person('Marron', 19)
console.log(p1.sayHi == p2.sayHi)  // true
p1.sayHi()  // "Hi ~"

可见构造函数通过Person.prototype类似构造的所有对象是共享的(同一个内存空间)
javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象.

javascript --- 对象原型相关推荐

JavaScript对象——原型与原型链
原型与原型链一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...
浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
如何更好地理解Javascript对象的自有属性和原型继承属性
Javascript对象具有"自有属性"(own property),也有一些属性是从原型对象继承而来的.为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和设置细 ...
细说JavaScript对象(2)：原型对象
JavaScript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承. 尽管人们经常将此看做是 JavaScript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加 ...
JavaScript -- 对象与原型链 [[Prototype]]
一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...
初学JavaScript：js中的对象（对象+原型对象）
文章目录 js对象详解 1.创建对象字面量模式创建对象构造函数模式创建对象 2.访问对象访问属性访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...
JavaScript(八)——对象原型
通过原型这种机制,JavaScript 中的对象从其他对象继承功能特性:这种继承机制与经典的面向对象编程语言的继承机制不同.本文将探讨这些差别,解释原型链如何工作,并了解如何通过 prototype ...
JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链
编程思想面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 优点: 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单 ...

javascript --- 对象原型