前言
原型
、原型链
应该是被大多数前端er
说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己。
最早一篇原型链
文章写于2019年07月
,那个时候也是费了老大劲才理解到了七八成,到现在基本上忘的差不多了。时隔两年,兴趣所向重新开始复盘一下原型
和原型链
的内容。
JavaScript中的对象
在JavaScript
中,对象被称为是一系列属性的集合。
创建对象的方式也有很多种,最常见的一种就是双花括号
的形式:
var obj = {};
obj.name = '小土豆';
obj.age = 18;
这种方式实际上是下面这种方式的语法糖
:
var obj = new Object();
obj.name = '小土豆';
obj.age = 18;
除此之外,在JavaScript
中也可以通过构造函数
自定义对象。
function Cat(){}
var catMimi = new Cat(); // 自定义对象
如果一个函数使用
new
关键字调用,那么这个函数就可以称为是构造函数
,否则就是普通函数
。
什么是原型
一句话简单总结原型:原型是一个对象
。
在后面的总结中,
原型
可能会被描述为原型对象
,其等价于原型
原型从哪里来?原型这个对象存在于哪里,需要通过代码去创建吗?
我们说对象是一系列属性的集合,那原型这个对象包含什么属性呢?
如何操作和使用原型?
接下来我们一个一个问题去探究。
原型从哪里来
JavaScript
会为所有的函数
创建一个原型
。
function Cat(){}
上面的代码中我们创建了一个Cat
函数,那这个Cat
函数就有一个原型
,用代码表示就是:Cat.prototype
。
同样我们创建一个函数Fn1
,函数Fn1
就有一个原型
,用代码表示就是Fn1.prototype
。
函数名称
的大写
和小写
本质上没有任何区别
原型包含哪些属性
前面我们说过以下这两点:
- 原型是一个对象
- 对象是一系列属性的集合
那原型
都包含哪些属性呢?
前面我们已经知道原型
用代码表示就是:functionName.prototype
,那我们在代码中console.log
一下。
function Cat(){}
console.log("Cat.prototype:");
console.log(Cat.prototype);
function Dog(){}
console.log("Dog.prototype:");
console.log(Dog.prototype);
Firefox
浏览器中的输出结果如下:
可以看到函数的原型
默认有两个属性:constructor
和<prototype>
。
其中,函数原型的constructor
属性指向函数本身。
函数原型的<propotype>
属性称为隐式原型
,后面我们会分出一节单独介绍隐式原型
。
如何操作和使用原型
正常我们操作一个普通对象
的方式是下面这样的:
var obj = {}; // 创建对象
obj.name = '小土豆'; // 为对象添加属性
obj.age = 18; // 为对象添加属性
var name = obj.name; // 访问对象属性
原型
既然也是一个对象,所以操作原型
的方式和上述的方式相同。
function Cat(){}
Cat.prototype.type = 'cat';
Cat.prototype.color = 'White';
Cat.prototype.sayInfo = function(){
console.log(this.type + ' is ' + this.color);
}
此时再次打印Cat.prototype
就能看到我们添加到原型
上的属性:
访问原型对象
上的方法和属性:
以上这些操作
原型
的方法,对于真正的项目开发并没有什么参考价值,不过不用着急,后面我们会详细讲解
隐式原型
前面我们在总结函数的原型对象
时提到过隐式原型
。
那实际上,JavaScript
会为所有的对象
创建叫隐式原型
的属性。我们一直说原型是一个对象,所以在上面的截图中,原型也有一个隐式原型
属性。
隐式原型的代码表示
隐式原型
是对象的私有属性
,在代码中可以这样访问:obj.__proto__
。
obj.__proto__
这种写法是非标准
的,一些低版本的浏览器并不支持这样的写法
我们在浏览器的控制台中实际访问一下:
从打印的结果可以看到隐式原型
也是一个对象,那隐式原型
这个对象里面又包含什么属性呢?下面我们一起来看看。
隐式原型存在的意义
首先我们写一个简单的示例:
function Cat(){}
var catMimi = new Cat();
var catJuju = new Cat();
在上面这段代码中,我们创建了一个Cat
函数,并且通过new
关键字创建了以Cat
为构造函数
的两个实例对象catMimi
和catJuju
。
接下来我们在浏览器的console
工具中看看这两个实例对象的隐式原型
都包含了那些属性。
可以看到,catMimi.__proto__
和catJuju._proto__
的结果貌似是一样的,而且眼尖的同学应该也发现了这个打印结果似乎和前面一节【原型包含那些属性】
中打印的Cat.prototype
是一样的。
那话不多说,我们用==
运算符判断一下即可:
可以看到所有的判断结果均为true
。
由于对象catMimi
、catJuJu
都是由Cat
函数创建出来的实例,所以总结出来结论就是:对象的隐式原型__proto__指向创建该对象的函数的原型对象
。
原型链:原型和隐式原型存在的意义
前面我们总结了原型
、隐式原型
的概念以及如何使用代码操作原型
和隐式原型
,总的看来原型
和隐式原型
好像也没有特别厉害的地方,它们到底有什么用呢?
所有的实例对象共享原型上定义的属性和方法
我们来看下面这样一个示例:
function Cat(name, age){
this.type = 'RagdollCat'; //布偶猫
this.eyes = 2;
this.name = name;
this.age = age;
this.sayInfo = function(){
console.log(this.type + ' ' + this.name + ' is ' + this.age + ' years old');
}
}
在这个示例中,我们创建了一个Cat
函数,同时Cat
函数有五个属性:type
、eyes
、name
、age
、sayInfo
,其中type
和eyes
属性已经有了初始值,而name
、age
通过参数传递并赋值;sayInfo
对应是一个函数,打印出type
、name
和age
的值。
接着我们创建Cat
的两个实例对象catMimi
、catJuju
,并传入不同的name
和age
参数。
var catMimi = new Cat('Mimi', 1);
var catJuju = new Cat('Juju', 2);
控制台查看一下我们创建的对象:
可以看到这两个对象有着相同的属性,由于type
、eyes
是在Cat
函数创建时已经有了固定的初始值
,所以这两个属性值是相同的;sayInfo
函数也都是相同的功能,打印出一些属性的信息;只有name
、age
是通过参数传递的,各自的值不相同。除此之外呢,catMimi
和catJuju
是两个不同的对象,两者的属性值
互相独立,修改其中任意一个的属性值并不会影响另外一个对象的属性值。
假如之后我们有更多这样的对象,JavaScript
还是会为每一个对象创建相同的属性
,而这些所有的对象都拥有着相同的type
、eyes
属性值和相同功能的sayInfo
函数。这无疑造成了内存浪费,那这个时候我们就可以将这些属性定义到函数的原型对象
上:
function Cat(name, age){
this.name = name;
this.age = age;
}
Cat.prototype.type = 'RagdollCat'; //布偶猫
Cat.prototype.eyes = 2;
Cat.prototype.sayInfo = function(){
console.log(this.type + ' ' + this.name + ' is ' + this.age + ' years old');
}
var catMimi = new Cat('Mimi', 1);
var catJuju = new Cat('Juju', 2);
然后我们再来看看这两个对象:
可以看到这两个对象现在只包含了两个属性,就是Cat
构造函数内容内部定义的两个属性:name
、age
。
接着我们在去访问对象上的type
、eyes
和sayInfo
:
我们的实例对象
还是可以正常访问到属性,方法也打印出来正确的信息。那到底是怎么访问到的呢?
原型链
在上一个示例代码中,我们将一些属性
和方法
定义到函数的原型
上,最后使用该函数创建出来的实例对象
可以正常访问原型
上定义的属性
和方法
,这是怎么做到的呢?
前面我们说过:对象的隐式原型
指向创建该对象的函数的原型对象
,所以当实例对象
中没有某个属性时,JavaScript
就会沿着该实例对象
的隐式原型
去查找,这便是我们所说的原型链
。
那既然是链,我们想到的应该是一个连着一个的东西,所以应该不仅仅是当前实例对象的隐式原型
指向创建该对象的函数的原型对象
,所以我们在对catMimi
对象做点操作:
在上面的操作,我们调用了catMimi
的hasOwnProperty
方法,很明显我们并没有为这个对象定义该方法,那这个方法从哪里来呢?
答案依然是原型链
:
- 调用
catMimi.hasOwnProperty()
方法 - 在实例对象
catMimi
中查找属性,发现没有该属性 - 去
catMimi.__proto__
中查找,因为catMimi.__proto__=Cat.prototype
(实例对象的隐式原型
指向创建该实例的函数的原型
),也就是在Cat.prototype
中查找hasOwnProperty
属性,很明显Cat.prototype
也没有该属性 - 于是继续沿着
Cat.prototype.__proto__
查找,又因为Cat.prototype.__proto__ = Object.prototype
(我们一直在强调原型是一个对象,既然是对象,就是由Object
函数创建的,所以Cat.prototype
的隐式原型
指向Object
函数的原型)
我们打印一下Object.prototype
的是否包含hasOwnProperty
属性:
可以看到,Object.prototype
中存在hasOwnProperty
属性,所以catMimi.hasOwnPrototype
实际上调用的是Object.prototype.hasOwnProperty
。
总结
本篇文章到此基本就基本结束了,相信大家应该对原型
和原型链
有了一定的了解。最后呢,我们在对本篇文章做一个总结。
近期文章
骨架屏(page-skeleton-webpack-plugin)初探
Vue结合Django-Rest-Frameword实现登录认证(二)
Vue结合Django-Rest-Frameword实现登录认证(一)
写在最后
如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者
文章公众号
首发,关注 不知名宝藏程序媛
第一时间获取最新的文章
笔芯️~