JS中原型对象的理解

深入理解JavaScript原型

相比于基于类的语言(如java或者C++),JavaScript是动态的,并且本身不提供一个class实现(在ES2015/ES6中引入了class关键字,但那只是语法,JavaScript仍然是基于原型的)。
在理解js的原型之前,必须先了解object和Function,object和Function都是作为JS的自带函数,Object继承自己,Function继承自己,Object和Function互相继承对方,也就是说Object和Function都既是函数也是对象。

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

Object是Function的 实例,而Function是它自己的实例。

console.log(Function.prototype);  //ƒ () { [native code] }
console.log(Object.prototype);  //Object

什么是原型

我们知道JavaScript可以使用构造函数来创建一个新的对象。例如:

// 构造函数,无返回值,通常通过new调用的函数都称为构造函数
function Fun(name){
    this.name = name;
}
// 通过new新建一个对象
var fun = new Fun('张三');

这和一般面向对象编程语言中创建对象的语法很类似,只不过是一种简化的设计,new后面跟的不是类,而是构造函数。这里的构造函数可以看做是一种类型,就像面向对象编程语言中的类,但是这样创建的对象除了属性一样外,并没有其他的任何联系,对象之间无法共享属性和方法。每当我们新建一个对象的时候,都会为方法和属性分配一块内存,这是极大的浪费资源。因此,js为构造函数设置一个属性。这个属性指向一个对象,所有实例对象需要共享的属性和方法。就放在构造函数里面。实例对象一旦创建这个对象,将自动引用这个对象的属性和方法,也就是说,实例对象的属性和方法分成两种:一种是本地的,不共享的,一种是引用的,共享的,这个对象就是原型(prototype)对象,也就是原型。
每个函数都有一个prototype属性,它默认指向一个Object空对象(也就是原型对象),原型对象中有一个属性constructor,它指向函数对象。
image.png
比如说Date()是一个对象函数,那么它就有一个prototype属性。

console.log(Date.prototype);
console.log(typeofDate.prototype);//object

image.png
假如我们自定义一个函数对象,它默认指向Object空对象(就是没有我们的属性)

functionFun(){}
console.log(Fun.prototype);

image.png
根据上面的图可知只是constructor属性和__proto__隐式属性属性。

在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。

显式原型和隐式原型

每个函数function都有一个prototype,也就是显式原型(属性)。
每个实例对象都有一个__proto__,也就是隐式原型(属性)。
我们可以建立一个函数来验证:

function Fn() { //内部语句:this.prototype={}

}
// 1.每个函数function都有一个prototype,即显式原型
console.log(Fun.prototype);  //object
// 2.每个实例对象都有一个__proto__,可称为隐式原型
var fun = new Fun();
//内部语句:this.__proto=Fn.prototype
console.log(fun.__proto__); //object
//3.实例对象的隐式原型的值为其对应构造函数的显式原型的值
console.log(Fun.prototype === fun.__proto__);//true

显式原型对象和隐式原型对象都是引用变量,保存的都是地址值。显式原型默认指向一个空的Object对象,隐式原型指向创建这个对象的函数的prototype。下面结合流程图来分析上面的代码:
Untitled Diagram-Page-1 (2).png
分析:
首先在堆里面创建一个函数对象,假设地址值为0x123,函数名在栈空间里面,Fn是引用类型,它的值是地址值,存的是函数对象的地址0x123.
Function函数对象里面有一个prototype属性,它也是引用类型,它默认指向一个空的Object对象,假设这个空对象的地址是0x234,所以Function函数对象里面prototype属性的值是0x234,所以console.log(Fun.prototype)最终输出的是这个空Object对象。
下面到var fun = new Fun(), 首先产生的fn变量在栈空间中,它也是一个引用类型,假设存的地址是0x345,同时在堆内存中创建一个Fn的实例对象,其地址就是0x345。此外这个Fn的实例对象里面有__proto__属性,由于this.__proto=Fn.prototype,所以__proto__的值是:0x234。所以console.log(fun.__proto__); 输出的也是Object空对象。
下面给原型添加方法:

//给原型添加方法
Fn.prototype.test = function() {
   console.log("test()");
}
fn.test(); //"test()"

(结合上图)Fn.找到prototype.找到Object,在Object对象里面建test()方法。实际上这个test()也是一个函数对象,和前面的函数对象一样,就不展开解释了。所以在执行fn.test()的之后就能一步一步到Object中找到test()方法。

小结:

  • 函数的prototype属性是在定义函数时自动添加的,默认值是一个空Object对象。
  • 每个实例对象都有一个__proto__属性这个属性在创建对象的时候就自动添加,默认值为构造函数的prototype属性值。

我们能直接操作显式原型但不能直接操作隐式原型(ES6之前)。

原型链

先看这一段代码:

function Fn(){
    this.test1 = function()  {
        console.log("test1()");
    }
}
· = function() {
    console.log("test2()");
}
var fn = new Fn();
fn.test1(); //test1()
fn.test2();//test2() 
console.log(fn.toString());//[object Object]
// fn.test3();error 

1591444704834.jpg
大概过程和上面的类似。此外我们不难知道Object空对象也是一个实例对象,是Object的实例对象。我们之前说过每个实例对象都有一个__proto__属性,因此Object的实例对象也有一个__proto__属性,假设它的值是0x345。其实在执行这些代码之前栈空间里就已经有一个Object,它指向Object函数对象,假设它这个函数对象的地址值是0x456,所以栈空间里的Object的值就是0x456。
Object函数对象里面也必然有一个prototype属性,根据实例对象的隐式原型的值为其对应构造函数的显式原型的值,所以Object函数对象里面的prototype属性的值是0x345,都是指向Object的原型对象,它的地址值是0x345。
Object原型对象里面有很多默认的自带的方法。
console.log(Object.prototype)
image.png
当执行到Fn.prototype.test2的时候,在Object对象里面创建test2对象。 var fn = new Fn()和上面的类似,分别在栈空间里创建fn和堆空间里创建Fn函数对象,假设地址是0x567。Fn实例对象里面有__proto__:0x234,指向Object对象。还有一个test1对象。


注意:Object原型对象里面也有一个__proto__属性,它的值是null。
所以fn.test3返回的是undefined,因为找到了原型的尽头还是没找到。

因此,函数的显式原型指向的对象默认是空Object实例对象(但是Object不满足)
console.log(Fn.prototype instanceof Object); //true
console.log(Object.prototype instanceof Object); //false 
console.log(Function.prototype instanceof Object);//true
所有函数都是Function的实例,包括Function本身。
console.log(Function.__proto__ === Function.prototype);//true

下面补充一点原型属性的注意。

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

通过下面的代码可以认证

function Foo() {

}
Foo.prototype.a = "xxx";
var foo1 = new Foo();
console.log(foo1.a);//'xxx'

 var foo2 = new Foo();
 foo2.a = 'yyy';
 console.log("foo1.a = " + foo1.a );
 console.log("foo2.a = " + foo2.a );

上面的结果是:

foo1.a = xxx
foo2.a = yyy

通过这段代码可认证属性在对象本身上,方法在其原型上。

 var foo2 = new Foo();
 foo2.a = 'yyy';
 console.log("foo1.a = " + foo1.a );
 console.log("foo2.a = " + foo2.a );

//  在Foo原型上添加方法
function Person(name,age) {
    this.name = name;
    this.age = age;
}
// 定义一个方法
Person.prototype.setName = function(name) {
    this.name = name;
}
var p1 = new Person('张三',12);
p1.setName('李四');
console.log(p1);

image.png


第一接触并学习原型,通过看了一些博客和视频根据自己理解总结出来的。如有不对望大家指正。
阅读 225

推荐阅读
前端小K哥
用户专栏

一只一直在奔跑的蜗牛

0 人关注
2 篇文章
专栏主页