原型和原型链

一.原型

基于原型的语言(来自MDN)

        JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

        准确地说，这些属性和方法定义在 Object 的构造器函数 (constructor functions) 之上的 prototype 属性上，而非对象实例本身。

        在传统的 OOP 中，首先定义“类”，此后创建对象实例时，类中定义的所有属性和方法都被复制到实例中。在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

备注： 理解对象的原型（可以通过Object.getPrototypeOf(obj)或者已被弃用的__proto__属性获得）与构造函数的prototype属性之间的区别是很重要的。前者是每个实例上都有的属性，后者是构造函数的属性。也就是说，Object.getPrototypeOf(new Foobar())和Foobar.prototype指向着同一个对象。

把以上的做个总结

        所有函数都有一个prototype(原型)属性

        新建对象的时候都会默认调用构造器方法,构造函数里有prototype(原型)属性,而对象中的_proto_属性指向的是他的构造函数的prototype

        也就是说一个对象的_proto_(隐式原型)===其构造函数的prototype

        _proto_已被弃用,但是现在目前常见的浏览器仍旧支持,可以使用Object.getPrototypeOf(obj)获得原型

//1)所有引用类型都有一个_proto_(隐式原型)属性,属性值是一个普通的对象或null 
//2)所有函数都有一个protype(原型)属性,属性值是一个普通的对象 
//3)所有引用类型的_proto_属性指向他构造函数的prototype

作用

        1.数据共享 节约内存空间

        2.实现继承

二.原型链

        当访问实例化原型的一个属性时,首先会在该对象的自身属性中去寻找,如果找不到,则会想起_proto_指向的原型中去寻找,如果仍找不到,则会继续向该原型_proto_指向的上一级原型去寻找(原型_proto_的值是一个普通对象或null),直到找到或Object.prototype._proto_为止(值为null),这种链式寻找的过程就是原型链

不多说直接上代码测试:

function Fn() {
 this.test1 = function () { 
    console.log('fn内的test1函数')
 } 
} 
Fn.prototype.test2 = function () { 
    console.log('fn原型上test2函数') 
} 
var fn = new Fn() 
fn.test1() 
fn.test2()

运行结果

输出一下fn

function Fn() {
    this.test1 = function () { 
    console.log('fn内的test1函数')
    } 
} 
Fn.prototype.test2 = function () { 
    console.log('fn原型上test2函数') 
} 
var fn = new Fn() 
// fn.test1()
// fn.test2() 
console.log('fn', fn);

在Object对象中有一个方法是toString,这是我们是没有定义的当我们使用fn.toString()

function Fn() { 
this.test1 = function () { 
    console.log('fn内的test1函数') 
    } 
} 
Fn.prototype.test2 = function () { 
    console.log('fn原型上test2函数')
} 
var fn = new Fn() 
// fn.test1() 
// fn.test2() 
// console.log('fn', fn)
console.log('toString',fn.toString())

我们会发现toString是可以使用的,从而验证了原项链

原型链的源头是Object

文章最后说一下需要特别注意的地方(虽然平常可能遇不到,但遇到了是真的有用)

Object.prototype.constructor.proto === Function.prototype //

true Function.prototype.proto === Object.prototype //

true Object.prototype.proto === null // true