详解JavaScript中的原型
前言
原型
、原型链
应该是被大多数前端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实现登录认证(一)
写在最后
如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者
文章公众号
首发,关注 不知名宝藏程序媛
第一时间获取最新的文章
笔芯️~
详解JavaScript中的原型的更多相关文章
- 详解JavaScript中的原型和继承-转自颜海镜大大
本文将会介绍面向对象,继承,原型等相关知识,涉及的知识点如下: 面向对象与继承 CEOC OLOO 臃肿的对象 原型与原型链 修改原型的方式 面向对象与继承 最近学习了下python,还写了篇博文&l ...
- 详解Javascript中的原型与原型链
目录 知识点 参考资料 结束语 知识点 面向对象编程 我们熟悉的Java和C#里,面向对象的两个基本概念是类class和实例instance,而ES6以前的Javascript并没有设计class. ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 【转】详解JavaScript中的this
ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- this详解:JAVASCRIPT中的this到底是谁?
语法 this 全局对象 在全局执行上下文(函数之外),this引用的是全局对象. console.log(this.document === document); // true // In web ...
- 【转】详解JavaScript中的异常处理方法
有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...
- 详解JavaScript中的Event Loop(事件循环)机制
前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...
随机推荐
- AtCoder Beginner Contest 165
比赛链接:https://atcoder.jp/contests/abc165/tasks A - We Love Golf 题意 区间 $[a, b]$ 中是否存在 $k$ 的倍数. 代码 #inc ...
- Uva 12436 Rip Van Winkle's Code
Rip Van Winkle was fed up with everything except programming. One day he found a problem whichrequir ...
- ElasticSearch 7.x 学习
目录 ElasticSearch 7.x 一.前言 1.1.正向索引和倒排索引 1.1.1.正向索引 1.1.2.倒排索引 二.安装 三.ES 基本概念 3.1.索引 3.2.文档 3.4.mappi ...
- HDU 3065 病毒侵袭持续中(AC自动机 模板)题解
题意:给出主串中每个模式串的个数 思路:毒瘤出题人多组数据没说给的是多组数据. 板子: struct Aho{ struct state{ int next[130]; int fail, cnt; ...
- Mybatis基础:Mybatis映射配置文件,Mybatis核心配置文件,Mybatis传统方式开发
一.Mybatis快速入门 1.1 框架介绍 框架是一款半成品软件,我们可以基于这个半成品软件继续开发,来完成我们个性化的需求! 框架:大工具,我们利用工具,可以快速开发项目 (mybatis也是一个 ...
- matplotlib 图标显示中文
matplotlib 显示中文 Method_1: # 添上: plt.rcParams['font.sans-serif'] = ['SimHei'] # 用来正常显示中文标签 plt.rcPara ...
- element-ui & babel-plugin-component config bug
element-ui & babel-plugin-component config bug vue-cli bad babel.config.js module.exports = { pr ...
- codepen iframe theme id
codepen iframe theme id iframe css theme demos See the Pen css margin collapsing (1. 相邻兄弟元素) by xgqf ...
- node mailer & email bot
node mailer & email bot email https://nodemailer.com/about/ https://github.com/nodemailer/nodema ...
- 小程序 web-view
小程序 web-view https://opendocs.alipay.com/mini/component/web-view https://opendocs.alipay.com/mini/ap ...