javascript数据类型（五）--- 函数对象之原型与原型链

一、原型（prototype）

1.1 函数的prototype属性

• 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
• 原型对象中有一个属性constructor, 它指向函数对象。

　　如下：

function Fun () {

}
console.log(Fun.prototype)  // 默认指向一个Object空对象(没有我们的属性)

　　控制台输出结果为：

{constructor: ƒ}
constructor: ƒ Fun()
__proto__: Object

 

1.2 给原型对象添加属性(一般都是方法)

　　给对象原型添加方法直接使用：Fun.prototype.方法名 = function() {方法体}

作用：函数的所有实例对象自动拥有原型中的属性(方法)

Fun.prototype.test = function () {
       console.log('test()')
}
var fun = new Fun()
fun.test()    //通过实例化对象调用原型对象中的方法。此处的方法类似于java中的实例方法

　　以上代码在控制台输出 ： test()。即通过给函数的原型对象添加的方法，函数的实例对象会自动拥有该方法。

　　若要给函数添加静态方法，代码如下：

Fun.staticFun = function() {  //给函数对象添加静态的方法
    console.log( 'this is static function')
}
 
Fun.staticFun();  //通过函数名直接调用静态方法，类似java中的静态方法的调用

 

二、显式原型与隐式原型

• 每个函数function都有一个prototype，即显式原型(属性)
• 每个实例对象都有一个__proto__，可称为隐式原型(属性)
• 对象的隐式原型的值为其对应构造函数的显式原型的值

 

    //定义构造函数
function Fn() {   // 内部语句: this.prototype = {}

}
console.log(Fn.prototype)  //定义函数时添加了显示原型即prototype属性

var fn = new Fn()  // 内部语句: this.__proto__ = Fn.prototype
console.log(fn.__proto__) //创建对象时给对象添加了隐式原型属性__proto__

console.log(Fn.prototype===fn.__proto__) // true 对象的隐式原型与其构造函数的显示原型是同一个对象

总结:
* 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
* 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
* 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

 

三、原型链

3.1 原型链(图解)。

创建一个Fun函数对象，并new创建一个Fun的实例对象，访问对象属性是的分析图如下。访问一个对象的属性时：

1. 先在自身属性中查找，找到返回；
2. 如果没有, 再沿着__proto__这条链向上查找, 找到返回；
3. 如果最终没找到, 返回undefined

 

 

 

3.2 原型链_属性问题 

1. 读取对象的属性值时: 会自动到原型链中查找
2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

function Fn() {

}
Fn.prototype.a = 'xxx'
var fn1 = new Fn()
console.log(fn1.a, fn1)  //'xxx'  

var fn2 = new Fn()
fn2.a = 'yyy'
console.log(fn1.a, fn2.a, fn2)  //'xxx'  'yyy'

 

3.3 instanceof是如何判断的

　　表达式: A instanceof B, 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

function Foo() {  }
var f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true

console.log(Object instanceof Function) // true
console.log(Object instanceof Object) // true
console.log(Function instanceof Function) // true
console.log(Function instanceof Object) // true

function Foo() {}
console.log(Object instanceof  Foo) // false

 

以上内容来源于谷粒学院JavaScript高级教学视频笔记 http://www.gulixueyuan.com/my/course/194