温州年丰文体 发表于 2023-1-3 07:35:00

JavaScript:原型(prototype)

面向对象有一个特征是继承,即重用某个已有类的代码,在其基础上建立新的类,而无需重新编写对应的属性和方法,继承之后拿来即用;
在其他的面向对象编程语言比如Java中,通常是指,子类继承父类的属性和方法;
我们现在来看看,JS是如何实现继承这一个特征的;
要说明这个,我们首先要看看,每个对象都有的一个隐藏属性[];
对象的隐藏属性[]

在JS中,每个对象obj,都有这样一个隐藏属性[],它的值要么是null,要么是对另一个对象anotherObj的引用(不可以赋值为其他类型值),这另一个对象anotherObj,就叫做对象obj的原型;
通常说一个对象的原型,就是在说这个隐藏属性[],也是在说它引用的那个对象,毕竟二者一致;
现在来创建一个非常简单的字面量对象,来查看一下这个属性:

可以看到,对象obj没有自己的属性和方法,但是它还有一个隐藏属性[],数据类型是Object,说明它指向了一个对象(即原型),这个原型对象里面,有很多方法和一个属性;
其他的暂且不论,我们先重点看一下,红框的constructor()方法和__proto__属性;
访问器属性(__proto__)

访问[]

从红框可以看到,属性__proto__是一个访问器属性,有getter/setter特性(这个属性名前后各两个下划线);
问题是,它是用来访问哪个属性的?
我们来调用一下看看:

可以看到,__proto__访问器属性,访问的正是隐藏属性[],或者说,它指向的正是原型对象;
值得一提的是,这是一个老式的访问原型对象的方法,现代编程语言建议使用Object.getPrototypeOf/setPrototypeOf来访问原型对象;
但是考虑兼容性,使用__proto__也是可以的;
请注意,__proto__不能代表[]本身,它只是其一个访问器属性;
设置[]

正因为它是访问器属性,也即具有getter和setter功能,我们现在可以控制对象的原型对象的指向了(并不建议这样做):

如上图,现在将其赋值为null,好了,现在obj对象没有原型了;

如上图,创建了两个对象,并且让obj1没有了原型,让obj2的原型是obj1;
看看,此时obj2.name读取到obj1的属性name了,首先obj2在自身属性里找name没有找到,于是去原型上去找,于是找到了obj1的name属性了,换句话说,obj2继承了obj1的属性了;
这就是JS实现继承的方式,通过原型这种机制,后面会在继承详细说明继承和原型的关系;
让我们看看下面的代码:

正常的obj2.name = 'Jerry'的添加属性的语句,会成为obj2对象自己的属性,而不会去覆盖原型的同名属性,这是再正常不过了,继承得来的东西。只能读取,不能修改(访问器属性__proto__除外);
现在的问题是,为什么obj2.__proto__是undefined?上面不是刚刚赋值为obj1了吗?
原因就在于__proto__是访问器属性,我们读取它实际上是在调用对应的getter/setter方法,而现在obj2的原型(即obj1)并没有对应的getter/setter方法,自然是undefined了;
现在综合一下,看下面代码,与上图做比较:

为什么最后obj2.__proto__输出的是hello world,为什么__proto__成了obj2自己的属性了?
关键就在于红框的三句代码:
第一句let obj2 = {},此时obj2有原型,有访问器属性__proto__,一切正常;
第二句obj2.__proto__ = obj1,这句调用__proto__的setter方法,将[]的引用指向了obj1;
这一句完成以后,obj2因为obj1这个原型而没有访问器属性__proto__了;
所以第三句obj2.__proto__ = 'hello world'的__proto__已经不再是访问器属性了,而是一个普通的属性名了,所以这句就是一个普通的添加属性的语句了;
构造器(constructor)

在隐藏属性[]那里,看到其有一个constructor()方法,顾名思义,这就是构造器了;
类对象与函数对象


[*]类对象
在其他编程语言比如Java中,构造方法通常是和类名同名的函数,里面定义了对象的一些初始化代码;
当需要一个对象时,就通过new关键字去调用构造方法创建一个对象;
那在JS中,当我们let obj = {}去创建一个字面量对象的时候,发生了什么?
上面这句代码,其实就是let obj = new Object()的简写,也是通过new关键字去调用一个和类名同名的构造方法去创建一个对象,在这里就是构造方法Object();
这种通过new className()调用构造方法创造的对象,称为类对象;

[*]函数对象
但是,再等一下,JS早期是没有类的概念的,那个时候大家又是怎么去创建对象的呢?
想一下,创建对象是不是需要一个构造方法(即一个函数),本质上是不是new Function()的形式去创建对象?
对咯,早期就是new Function()去创建对象的,这个Function就叫做构造函数;
这种通过new Function()调用构造函数创造的对象,称为函数对象;
构造函数和普通函数又有什么区别呢?除了要求是用function关键字声明的函数,并且命名建议大驼峰以外,几乎是没有区别的:

看,我们声明了一个构造函数Cat(),并通过new Cat()创造了一个对象tom;
打印tom发现,它有一个原型,这个原型和字面量对象的原型不一样,它有一个方法一个属性;
方法是constructor()构造器,指向的正是Cat()函数;
属性是另一个隐藏属性[],暂时不去探究它是谁;
也就是说,函数对象的原型,是由另一个原型和constructor()方法组成的对象;
我们可以用代码来验证一下,类对象和函数对象的原型的异同点:

如上所示,创建了一个函数对象tom和一个类对象obj;
可以看出:
函数对象的原型的方法constructor()指向构造函数本身;
函数对象的原型的隐藏属性[]和字面量对象(Object对象)的隐藏属性,他们两的引用相同,指向的是同一个对象,暂时不去探究这个对象是什么,就认为它是字面量对象的原型即可;
还可以看到,无论是类对象,还是函数对象,其原型都有constructor()构造器;
这个构造器在创建对象的过程中,具体起了什么样的作用呢?
让我们先看看函数对象tom的这个原型是怎么来的?我们之前一直都是在说对象有一个隐藏属性[]指向原型对象,究竟是哪一步,让这个隐藏属性指向了原型对象呢?
函数的普通属性prototype

事实上,每个函数都有一个属性prototype,默认情况下,这个属性prototype是一个对象,其中只含有一个方法constructor,而这个constructor指向函数本身(还有一个隐藏属性[],指向字面量对象的原型);
可以用代码佐证,如下所示:

注意,prototype要么是一个对象类型,要么是null,不可以是其他类型,这听起来很像隐藏属性[],不过prototype只是函数的一个普通属性,对象是没有这个属性的;
来看下这个属性的特性吧:

可以看到,它不是一个访问器属性,只是一个普通属性,但是它不可配置不可枚举,只能修改值;
它的value值,眼熟吗?正是构造函数创建的函数对象的原型啊;
它居然还有一个特性[],不要把它和value值里面的属性[]弄混,前者是prototype属性的特性,后者是prototype属性的一个隐藏属性,虽然此刻他们都指向字面量对象的原型,但是前者始终指向字面量对象的原型,后者则始终指向原型(而原型是会变的);
这里也不再去追究为什么它会有这样一个特性了,让我们把重点放在prototype属性本身;
new Function()的时候发生了什么

事实上,只有在调用new Function()作为构造函数的时候,才会使用到这个prototype属性;

我们来仔细分析一下上面代码具体发生了什么:
let tom = new Cat()这句代码的执行流程如下:

[*]先调用Cat.prototype属性的特性[](我们知道它指向字面量对象的原型)里面的constructor()构造器,创建一个字面量对象,当然此时这个对象的隐藏属性[]也都已经存在了,将这个对象分配给this指针;
[*]然后将Cat.prototype属性值value,复制(注意,这里是复制,不是赋值,这意味着这里不是传引用,而是传值)给字面量对象的隐藏属性[],即tom.__proto__ = Cat.prototype的value值;
[*]然后执行构造函数Cat()本身的语句,即this.name = "Tom";
[*]然后返回this指针给tom,即tom引用了这个字面量空对象,同时this指向了tom;
现在已经说清楚了new Function()发生的具体过程,上面代码的输出结果也佐证了我们所说的:
函数对象tom的原型正是Cat函数的属性prototype的值value,可以看到他们的constructor()构造器都指向Cat函数本身,并且tom.name的值为Tom;
然后我们修改了Cat函数的prototype的值value,Cat.prototype = Dog.prototype语句将其设置成了Dog函数的prototype的值value;
让我们顺着刚刚说的流程,看看let newTom = new Cat()的执行过程:

[*]先创建字面量空对象,与this绑定;
[*]然后将Cat.prototype的value值(此时等于Dog.prototype),复制给字面量对象的隐藏属性;
[*]然后执行构造函数Cat()本身的语句,即this.name = "Tom";
[*]然后返回this指针给newTom;
输出结果佐证了我们的执行过程,对象newTom的原型正是Dog函数的属性prototype的值value,他们的constructor()构造器都指向了Dog函数本身,但是newTom.name的值依然是"Tom";
从上面前后两个输出结果也可以看出来,最后一步的tom.__proto__ = Cat.prototype确实是复制而不是赋值,否则在Cat.prototype = Dog.prototype语句之后,tom.__proto__ = Cat.prototype = Dog.prototype了(即tom的原型也会是Dog.prototype的value值),但是输出结果表面并没有改变,依然是Cat.prototype;
现在我们已经明白了函数对象的原型为什么是这个样子的,也明白了函数对象的constructor()构造器指向了构造函数本身;
现在让我们像下面这样,使用一下函数对象的constructor()构造器吧:

看上面的代码,我们现在已经知道let tom = new Cat()的时候都发生了什么,也知道此时tom的原型的constructor()构造器指向的是Dog函数;
所以let spike = new tom.constructor()这句代码,当tom去自己的属性里没有找到constructor()方法的时候,就去原型里面去找,于是找到了指向Dog函数的constructor()构造器,所以这句代码就等于let spike = new Dog();
通过这段代码,好好体会一下函数对象的构造器吧。
构造函数和普通函数的区别

其实从技术上来讲,构造函数和普通函数没有区别;
只是默认构造函数采用大驼峰命名法,并通过new操作符去创建一个函数对象;

[*]new.target
我们怎样去判断一个函数的调用是普通调用,还是new操作符调用的呢?

如上所示,通过new.target,可以判断该函数是被普通调用的还是通过new关键字调用的;
[*]构造函数的返回值
构造函数从技术上说,就是一个普通函数,所以当然也可能有return返回值(通常构造函数于情于理都是不会有return语句的);

之前说过new Function()的时候的具体流程,我们来看一下:

[*]先创建一个字面量对象,绑定this;
[*]将Cat.prototype的value值复制给字面量对象的隐藏属性;
[*]执行Cat()函数本身,让字面量对象有属性name;
但是遇到了return语句,本来应该返回this指针的,现在返回了一个空对象{};
[*]所以最后tom指向的是return语句的空对象,而不是最开始创建的空对象;

字面量对象的原型

new Object()的时候发生了什么

我们刚刚说了new Function()创建函数对象的时候,具体发生了什么,现在来看看创建字面量对象的时候,具体发生了什么;
之所以单拿出字面量对象来说,是因为Object是JS其他所有类的祖先,要想创建一个对象,基础便是先new Object();
我们先看一下Object的prototype属性吧,是的,类和函数一样,也有这个属性(注意,是类有这个属性,而不是类的实例即对象有这个属性);

看上图,是不是很眼熟,这不就是字面量对象的原型吗?

是的,如上图所示,就是它;
那么这个原型对象还有原型吗?

如上所示,没有了,指向null了,看样子我们已经走到了原型链的原点了,为了方便,我们就称呼Object.prototype为原始原型吧;
看看它的特性吧:

和函数的prototype属性的特性,如出一辙,但是注意,它的writable属性是false了,这意味着我们再也无法对这个属性做任何操作了;
这是当然,它可是所有类的祖先,怎么能随意更改呢,事实上,所有类的prototype属性都是不可操作的,这是为了确保原型链的完整继承;
这下我们就能明白new Object()的时候大概流程是什么样子了;
以let obj = {}为例(其实就是let obj = new Object()):

[*]先调用Objecet.prototype属性的特性[]里面的constructor()构造器(不再继续深究这个构造器了),创建一个字面量对象,绑定this;
[*]然后将Object.prototype属性值value,复制给字面量对象的隐藏属性[],即this.__proto__ = Object.prototype;
[*]然后执行构造方法Object()本身的语句(不再进一步去研究这个构造方法了),总之此时字面量对象已经有着很多内置方法了;
[*]然后返回this赋值给obj,即obj引用了这对象,同时this指针也就指向了obj;
注意,其实new className()的流程不完全是上面这样子,与构造函数的流程还有一点点区别,主要是第二步和第三步,这和类的继承有关系,详细的在后面new className()的时候发生了什么里面具体说明;
更改原始原型

我们刚刚说了,Object.prototype属性的所有特性都是false,意味着我们对这个属性无法再做任何操作了;
这只是再说,我们不能对其本身做任何删改的操作了,但是它本身依然是一个对象,这意味着我们可以正常的向其添加属性和方法;

如上图所示,我们向Object.prototype属性对象里添加了hello()方法,并且由obj对象通过原型调用了这个方法;
类对象的原型

类的prototype属性

在创建类对象的时候,会将类的prototype属性值复制给类对象的原型;
所以说,类对象的原型等于类的prototype属性值;

而类的prototype属性,默认就有两个属性:

[*]构造器constructor:指向类本身;
[*]原型[]:指向父类的prototype属性;
以及

[*]类的普通方法;
从上图中可以看出,A的prototype属性里,除构造器和原型以外,就只有一个普通方法show();
这说明,只有类的普通方法,会自动进入类的prototype属性参与继承;
也就是说,一个类对象的数据结构,如下:

[*]普通属性
[*](原型)prototype属性

[*]构造器
[*]父类的prototype属性(父原型)
[*]方法

另外,类的prototype属性是不可写的,但是类对象的原型则是可以修改的;
类的原型

类本身也是有原型的,就像类对象有原型一样;

可以看到,B的原型就是其父类A,而A作为基类,基类的原型是本地方法;
正因如此,B可以通过原型去调用A的静态方法/属性;
也就是说,静态方法/属性,也是可以继承的,通过类的原型去继承;
继承了哪些东西

当子类去继承父类的时候,到底继承到了父类的哪些东西,也即子类可以用父类的哪些内容;

从结果上来看,我们可以确定如下:

[*]子类继承父类的静态属性/方法(基于类的原型);
[*]子类对象继承父类的普通方法和构造器(基于类的prototype);
[*]子类直接将父类的普通属性作为自己的普通属性(普通属性不参与继承);
由于原型链的存在,这些继承会一路沿着原型链回溯,继承到所有祖宗类;
子类的调用顺序

子类调用方法的顺序:

[*]先从自己的方法里调用,发现没有可调用的方法时;
[*]再沿着原型链,先从父类开始寻找方法,一直往上溯源,直到找到可调用的方法,或者没有而出错;
类与构造函数的区别

我们已经了解了函数对象的原型,原始原型,类对象的原型;
我们把这三种放一起做个比较吧:

我们自定义了类classA,自定义了函数functionA,并创建了类对象clsA和函数对象funcA,以及字面量对象;
可以看出,类对象与函数对象的原型的形式,是一致的,都是两个属性(一个隐藏属性一个构造器),只是各自原型里的constructor()指向各自的类/函数,即红框部分不同;
而他们的原型的原型则是一致的,和字面量对象的原型一样,都指向了原始原型,即绿框部分相同;
上面的输出结果佐证了这一点;
从这也可以看出来,其他类都是继承自原始类Object的,只是原型链的长短罢了,最终都可以溯源到原始类Object;
很显然,类与构造函数,很类似;
尽管类对象和函数对象有相似的原型,但是不代表类与构造函数就完全一样了,他们之间的区别还是很大的:

[*]类型不同,定义形式不同

类名后不需要括号,构造函数名后需要加括号;
类的方法声明形式和构造函数的方法不一样;
打印类和构造函数,类前的类型是class,构造函数前的类型是f,即function;
注意,不能使用typeof操作符,它会认为类和构造函数都是function,应该使用instanceof操作符;
[*]prototype不一样

如上所示,类的方法,会成为prototype的方法,但是构造函数的方法不会成为prototype的方法;
函数对象如果想要调用method1()方法,就不能写成let method1 = function(){},而是this.method1 = function(){},将其变为函数对象自己的方法;
[*]prototype的特性不一样

类的prototype是不可写的,但是构造函数的prototype是可写的;
[*]方法的特性不一样

由于函数对象不能通过原型继承方法,这里只展示类的方法的特性,如上所示,类的方法,是不可枚举的,也即不会被for-in语法遍历到;
[*]模式不同
由于类是后来才有的概念,所以类总是使用严格模式,即不需要显示使用use strict,类总是在严格模式下执行;
而构造函数则不同,默认是普通模式,需要显式使用use strict才会在严格模式下执行;
[*][]
类有隐藏属性[],其值为true;
这要求必须使用new关键字去调用它,像普通函数一样调用会出错:

但是很显然,构造函数本身就是一个函数,是可以像普通函数一样去调用的;
[*]构造器constructor
由于函数对象不能通过原型继承方法,所以无法自定义构造器;
但是类对象可以继承啊,所以可以自定义构造器并在new的时候调用;

从图上可以看出,我们是无法去自定义构造函数的构造器的,它会成为函数对象自己的一个方法;
new className()的时候发生了什么

在说明new className()具体流程之前,先了解一下必要的概念:
基类和派生类

class classA {};
class classB extends classA {};像classA这样没有继承任何类(实际上父原型是Object.prototype)的类称为基类;
像classB这样继承classB的类,称为classB的派生类;
为什么要分的这么细,是因为在创建类对象时,他们两个的行为不同,后面会说到;
重写构造器

事实上,如果我们不显式自定义构造器,JS也会默认提供一个构造器:
// 基类
constructor() {}

// 派生类
constructor() {
        super();
}所以我们要重写构造器,也是分两种情况:
// 基类重写构造器
class A {
    constructor() {
      code...
    }
}
   
// 派生类重写构造器
class B extends A() {
    constructor() {
      // 一定要先写super()
      super();
      code...
    }
}基类new className()时的流程

先来看一下基类创建对象的过程:

执行let a = new A()时,大致流程如下:

[*]首先调用A.prototype的特性[]创建一个字面量对象,同时this指针指向这个字面量对象;
[*]然后执行类A()的定义,A定义的普通属性成为字面量对象的属性并初始化,A.prototype的value值复制给字面量对象的隐藏属性[];
[*]然后再执行constructor构造器,没有构造器就算了;
[*]返回this指针给变量a,即a此时引用该字面量对象了;
从结果上看,在执行构造器时,字面量对象就已经有原型了,以及属性name,且值初始化为tomA;
然后才对属性name重新赋值为jerryA;
然而,构造器中对属性的重新赋值,从一开始就决定好了,只是在执行到这句赋值语句之前,暂存在字面量对象中;
派生类new className()时的流程

现在再来看一下派生类创建对象的过程;

执行let b = new B()的大致流程如下:

[*]首先调用B.prototype的特性[]创建一个字面量对象,同时this指针指向这个字面量对象;
[*]然后执行类B()的定义,B定义的普通属性成为字面量对象的属性并初始化,B.prototype的value值复制给字面量对象的隐藏属性[];
[*]然后再执行constructor构造器(没有显式定义构造器会提供默认构造器),第一句super(),开始进入类A()的定义;

[*]暂存B的属性值,转而赋值为A定义的值,A.prototype的value值复制给B.__proto__的隐藏属性[];
[*]然后执行constructor构造器(基类没有构造器就算了);
[*]返回this指针;
[*]丢弃A赋值的属性值,重新使用暂存的B的属性值;

[*]继续执行constructor构造器剩下的语句;
[*]返回this指针给变量b,即b引用该字面量对象了;
基类与派生类创建对象时的不同点

通过基类和派生类创建对象的流程对比,可以发现主要区别在于类的属性的赋值上;
属性值从一开始就已经暂存好:

[*]如果构造器constructor中有赋值,则暂存这个值;
[*]如果构造器没有,则暂存类定义中的值;
[*]不管父类及其原型链上同名的属性在中间进行过几次赋值,最终都会重新覆盖为最开始就暂存好的值;
原型链与继承

现在应该已经理解了原型是一个什么样的概念,以及如何去访问原型;
原型链

正如继承有儿子继承父亲,父亲继承爷爷一样,有这样一个往上溯源的关系,原型也可以这样往上溯源,这就是原型链的概念;
用代码去理解一下吧:

我们定义了三个对象A/B/C,并且设置C的原型是B,B的原型是A;
读取C.nameA的时候,首先在C自己的属性里去找,没有找到;
于是去原型B的属性里去找,没有找到;
再去B的原型A的属性里去找,找到并输出;
可以看C展开的一层层结构,可以很清晰的看到原型链的存在;
由此也可以看出,JS是单继承的,同Java一致;
但是正常的继承,肯定不是这样手动去设置对象的原型的,而是自动去设置的;
继承

JS中表示继承的关键字是extends,如果classA extends classB,则说明classA继承classB,classA是子类,classB是父类;

上面代码,classC继承classB,而classB继承classA;
所以classC的对象,继承了他们的属性,便有了三个属性nameA/nameB/nameC,这也说明,属性是不放在原型里的,而是会在创建对象的时候,直接成为classC的属性;
classC的原型,有一个属性一个方法,方法是constructor()构造器指向自己,属性是另一个原型;
注意,打印出来的原型后面标注的classX,原型指的是对象,不是类,所以c的原型不是指classB这个类本身,而是指其来源于classB;
紫色框:对象c的原型,即c.__proto__ == classC.prototype;
橘色框:classB.prototype,即对象c的原型的原型c.__proto__.__proto__ == classB.prototype;
绿色框:classA.prototype,即对象c的原型的原型的原型c.__proto__.__proto__.__proto__ == classA.prototype;
红色框:Object.prototype,也即原始原型c.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
这是一条完整的原型链,从中也能看出继承是什么样的一个形式;
原型高于extends

时刻记住,JS的继承,是依靠原型来实现的;
关键字extends虽然确立了两个类的父子关系,但是这只是一开始确立子类的父原型;
但是父原型是可以中途被修改的,此时子类调用方法,是沿着原型链去寻找的,而不是沿着子类父类的关键字声明去寻找的,这和Java是不一样的:

如图所示,C extends A确立了C一开始的父原型是A.prototype,c.show()调用的也是父类A的方法;
但是后面修改c的父原型为B.prototype,c.show调用的就不是父类A的方法,而是父原型的方法;
也就是说,原型才是核心,高于extends关键字;

来源:https://www.cnblogs.com/Journing/p/17000813.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: JavaScript:原型(prototype)