js基础:原型和原型链新手入门_原型基础指南

本文研究一下Javascript的核心基础——原型链和继承。对于使用过基于类的语言(如Java或C#)的人来说,Javascript的继承有点难以搞懂,因为它本身没有class这种东西。(ES6中引入了class关键字,看上去也像传统的OOP语言,但是那只是语法糖,底层还是基于原型)。原型链MDN上对于原型链的解释:当谈到继承时,JavaScript 只有一

js基础:原型和原型链新手入门

本文研究一下Javascript的核心基础——原型链和继承。

js基础:原型和原型链新手入门_原型基础指南

对于使用过基于类的语言(如Java或C#)的人来说,Javascript的继承有点难以搞懂,因为它本身没有class这种东西。(ES6中引入了class关键字,看上去也像传统的OOP语言,但是那只是语法糖,底层还是基于原型)。

原型链

MDN上对于原型链的解释:

这段话可能难以理解,我们来举个例子:

const list = []; // 定义数组
list.__proto__ === Array.prototype; // true
list.__proto__.__proto__ === Object.prototype; // true
list.__proto__.__proto__.__proto__===null; // true
// 继承关系为
// list -> Array.prototype -> Object.prototype -> null

结合MDN的解释,我们来解释一下上述例子:

list是Array的实例对象,使用了字面量的方式创建了对象实例。

// list的构造函数是Array,所以list.__proto__指向构造函数Array的原型对象。
list.__proto__ === Array.prototype; // true
// Array.prototype也是对象,也有自己的原型对象,原型是Object.prototype
// 下面是数学运算(等量代换)
// list.__proto__ = Array.prototype
// Array.prototype.__proto__ = Object.prototype
list.__proto__.__proto__ === Object.prototype; // true
// 目前我们来到了Object.prototype,根据规范,Object.prototype的原型对象为null
// list.__proto__ = Array.prototype
// Array.prototype.__proto__ = Object.prototype
// Object.prototype.__proto__ = null;
list.__proto__.__proto__.__proto__ === null; // true

原型链查找

const list = [];
list.toString();

属性查找过程如下:

查找list.toString()方法,没找到继续查找list.__proto__,也就是Array.prototype,找到了调用Array.prototype.toString

原型链结论

对象实例.__proto__ = 对象构造函数.prototype几乎所有对象的原型都是Object.prototypenull是对象,但是null没有原型属性/方法查找采用优先返回机制。

函数

经过原型链的简单介绍,相信大家对原型和原型链有了一个比较直观的了解了,现在要说到的是函数。

上面的结论在Javascript中是有问题的。我们来聊一聊函数。

先看看简单一点的例子,大家知道,Object是对象的构造函数,构造函数也是函数,所有的函数的原型都是Function.prototype,所以Object.__proto__是等于Function.prototype的。

事实证明,也是如此。

image-20190923170248951

那么Function.__proto__为什么不等于Object.prototype呢?Function不是对象吗?

上面我们说到所有函数的原型是Function.prototype,所以Function这个构造函数的原型__proto__等于Function.prototype。

基于以上原理,还有以下相等关系:

    Object.__proto__ === Function.prototypeArray.__proto__ === Function.prototype

引申的问题

我们知道Function.__proto__是指向Function.prototype,那个Function.prototype这个Function哪里来的?Function自己创造自己?那不是会死循环吗?

函数结论

函数的原型都是Function.protype,构造函数也是函数,所以构造函数的原型也是Function.prototype

来自灵魂的拷问1

下面是一道有点难度的JS基础题,可以感受一下:

function A() {
  
}

function B(a) {
  this.a = a;
}

function C(a) {
  if(a) {
    this.a = a;
  }
}

A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
console.log(new A().a);
console.log(new B().a);
console.log(new C().a);

输出是

1
undefined
1

解释

为什么输出1?

为什么输出undefined?

为什么输出1?

来自灵魂的拷问2

function F() {
  this.a = 1;
}
F.prototype.b = 2;

var f = new F();
console.log(f.hasOwnProperty('a'));
console.log(f.hasOwnProperty('b'));

输出是

true
false

解释

为什么输出true`?为什么输出false?

结尾

本文研究了原型和原型链之间的关系以及常见对象的原型和原型链,对于特殊对象Function也研究了一下,如果能搞懂后面两个问题,那本文对你来说没什么问题了。

海计划公众号
(0)
上一篇 2020/03/24 05:44
下一篇 2020/03/24 05:44

您可能感兴趣的内容

  • 网页中二维码识别规则,以及二维码识别常见问题使用教程_二维码菜鸟指南

    网页中二维码识别规则当客户端发现用户在网页的img标签内进行长按操作时,会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏,而不是之前有人提到的img标签中的图片。为什么要用截屏,这也是一个开发时候的思考。客户端截屏时候,可以不用考虑网络传输等因素,最快的得到识别结果,否则就需要走一次图片下载的逻辑,用户长按后等待的时间会加长,体验上也失去

    2020/04/03
  • 写给程序员的 HR 面试指南小白基础_面试使用说明

    首先这个问题是一个骨灰级问题,面试必问,很有必要认真探讨一下这个问题的答案。个人觉得可以从三方面来考虑回答(寻找新平台提升自己和表现出忠诚度和责任感) 在寻找新机会或新的平台首先,切记不要诋毁你的老东家。你应该把你的离职原因集中表述在“寻找新机会或新的平台”以及尝试在新的岗位上提升自己。当然,这样的回答对于一般职位的应聘者来说不会造成减分,但却不足以成为加

    2020/03/29
  • vue项目如何刷新当前页面?菜鸟教程网_刷新使用说明

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现

    2020/03/29
  • Urban Fonts基础入门_字体资源搜索与下载

    Urban Fonts小白攻略 官方网址:https://www.urbanfonts.com/ 简介描述:字体资源搜索与下载 UrbanFonts 收录超过 8000 种以上的免…

    2020/03/06
  • FlattyShadow菜鸟知识_图标长投影在线生成

    FlattyShadow菜鸟知识 官方网址:http://ww7.flattyshadow.com/ 简介描述:图标长投影在线生成 长阴影是介于扁平与立体之间的一个折中方案,既有扁…

    2020/03/10
  • WeightMirror基础入门_在线瘦身和瘦脸修图工具

    WeightMirror基础入门 官方网址:http://www0.modiface.com/weightmirror/li 简介描述:在线瘦身和瘦脸修图工具 Weight Mir…

    2020/03/10
  • Easings.net基础入门_常见函数图表,缓冲函数速查

    Easings.net基础入门 官方网址:https://easings.net/ 简介描述:常见函数图表,缓冲函数速查 缓动函数指定参数随时间的变化率。 现实生活中的对象不仅会立…

    2020/03/11
  • vill.ee小白攻略_真实模拟了眼球器官

    vill.ee小白攻略 官方网址:http://www.vill.ee/ 简介描述:真实模拟了眼球器官 这是一个网页技术的尝试,算是DEMO吧。网页真实模拟了3D眼球器官,包括背部…

    2020/03/11
  • maker.js教程视频_Library for creating 2D vector drawings for CNC and laser cutter machines

    maker.js教程视频 官方网址:http://maker.js.org GitHub:https://github.com/Microsoft/maker.js 简介描述:Li…

    2020/03/06
  • Js数组的并集,交集,差集的实现菜鸟知识_数组入门攻略

    并集、交集、差集的概念并集:以属于A或属于B的元素为元素的集合成为A与B的并(集)交集:以属于A且属于B的元素为元素的集合成为A与B的交(集)差集:以属于A而不属于B的元素为元素的集合成为A与B的差(集)ES6的实现现在有两个数组 arr1 和 arr2let arr1 = [1,2,3,4,4]
    let arr2 = [3,4,5,6,7]1.数组的并

    2020/03/26
  • React Native 与 Flutter 的跨平台之争入门指南_跨平台基础入门

    我们身处科技高速发展的时代;互联网日新月异,移动应用程序开发产业也在大踏步前进。多年来,移动应用的市场需求呈爆发式增长;众多企业都在开发自己的移动应用程序,或者用于促销自己的产品,或者用来向客户提供更好的服务。众所周知,主导全球市场的两大移动平台分别是 iOS 和 Android。当一家企业决定开发自己的移动应用时,他们需要分别为 iOS 和 Android

    2020/03/26
  • Hammer.js实现多点触控的javascript库小白攻略_库指南教程

    Hammer.js是一个开源的能实现多点触控的javascript库,可以识别触摸,鼠标点击和手势滑动操作,它不依赖任何第三方库,并且非常小巧灵活。安装使用npm安装:npm install –save hammerjs
    使用CDN或者直接下载到本地:<script src="https://cdn.bootcss.com/hammer.js/2.0.8/

    2020/03/29
  • 数据库的选择:数据库种类那么多,该如何选择?菜鸟知识_数据库小白攻略

    技术真的是日新月异,Web 网站已经脱离之前的静态网站的体系,转而使用动态语言搭建的动态网站。这也衍生出一个问题:该如何存储数据了?数据库就应运而生,它的作用是提供存储数据的容器。方便 web 网站进行存储、查询、更新等。数据库种类也很多,有成熟且稳定的 MySql 数据库,有后起之秀的 MongoDB 数据库,也有新时代宠儿 Redis 数据库。除此之外,

    2020/04/03
  • Promise对象 3 种妙用指南攻略_Promise指南攻略

    作为一个前端,说不了解 Promise 对象用法的基本不存在,这里就不对功能用法进行介绍了。但本文将会讲述你可能不知道的 Promise 3 种奇妙用法。当然,每种用法都会有其适用的特殊场景。Promise 对象是可以缓存需求对于一个对象而言,能够被缓存并不是一件难以理解的事情。缓存使用的意义往往是为了解决性能问题。而对于一个特定请求的 Promise 对象

    2020/03/20
  • 前端Js图片压缩小白知识_图片使用攻略

    实现思路获取input的file使用fileReader() 将图片转为base64使用canvas读取base64 并降低分辨率把canvas数据转成blob对象把blob对象转file对象完成压缩相关代码:

    <meta name="vi

    2020/03/29
  • jQuery 效果方法summary菜鸟教程_效果使用说明

    1. jQuery 效果 – slideDown() 方法 定义和用法slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。(被选元素的高度发生变化)$(selector).slideDown(speed,callback)speed可选。规定元素从隐藏到可见的速度(或者相反)。默认为 “normal”。可能的值:毫秒 (比如 1500)”sl

    2020/03/22