protopype 和 __proto__的区别
2019独角兽企业重金招聘Python工程师标准>>>
三张图搞懂JavaScript的原型对象与原型链
早前在博客园发的几篇基础文,都是图解系列,总结了一些JavaScript容易混淆的知识点,现在拿来在掘金分享一下吧。
原文地址:三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype
容易与__proto__
混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了。所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚。
我们知道原型是一个对象,其他对象可以通过它实现属性继承。但是尼玛除了prototype,又有一个__proto__
是用来干嘛的?长那么像,让人怎么区分呢?它们都指向谁,那么混乱怎么记啊?原型链又是什么鬼?相信不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,下面用三张简单的图,配合一些示例代码来理解一下。
1、prototype
和__proto__
的区别
var a = {};
console.log(a.prototype); //undefined
console.log(a.__proto__); //Object {}var b = function(){}
console.log(b.prototype); //b {}
console.log(b.__proto__); //function() {}
2、__proto__
属性指向谁
/*1、字面量方式*/
var a = {};
console.log(a.constructor); //function Object() { [native code] } (即构造器Object)
console.log(a.__proto__ === a.constructor.prototype); //true/*2、构造器方式*/
var A = function (){}; var a = new A();
console.log(a.constructor); // function(){}(即构造器function A)
console.log(a.__proto__ === a.constructor.prototype); //true/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.constructor); //function Object() { [native code] } (即构造器Object)
console.log(a2.__proto__ === a1);// true
console.log(a2.__proto__ === a2.constructor.prototype); //false(此处即为图1中的例外情况)
三、什么是原型链
var A = function(){};
var a = new A();
console.log(a.__proto__); //Object {}(即构造器function A 的原型对象)
console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象)
console.log(a.__proto__.__proto__.__proto__); //null
转载于:https://my.oschina.net/heyjuan/blog/796738
protopype 和 __proto__的区别相关推荐
- Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)
英文原文地址:http://sporto.github.com/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/?utm_ ...
- 三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
- JS中的THIS处理及正则表达式 — 1、callapplyjson
1.大纲 面向对象深入了解 函数的三种角色:函数也是对象 Function Function.prototype:call/apply/bind 面试题讲解 ... call && a ...
- 这些面试题你需要知道
路口 (一) http状态码及含义 http请求头报文的结构 http和https的区别,https在哪一层加密 Js中的原型和原型链 Js中prototype和_proto_的区别 Js中函数调用的 ...
- 说说JavaScript的原型链
在JS中,原型链有时候让人觉得很胡里花哨,又是prototype.__proto__又是各种指向什么的,让人觉得很头疼.如果你也有这种感觉,或许这篇文章可以帮助到你 一.认识原型 1.先来一串代码 v ...
- JavaScript 进阶 35 -- 构造函数、原型对象、实例之间的关系详解
说到继承 ,先要弄明白 :构造函数.原型对象.实例之间的关系. 先来了解几个简单的概念: 构造函数:通过 关键字 new 来调用的 函数,var p = new Person():Person就称为构 ...
- 一份来自于全球的前端面试题清单,看看老外喜欢考哪些题(部分有答案)
方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案.搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂.题目旁边的方括号内, 简单记录了与此题相关的知识点.总共大概一千多道,包含国 ...
- JS继承和继承基础总结
转自:https://www.cnblogs.com/diligenceday/p/4246515.html 首先,推荐一篇博客豪情的博客JS提高: http://www.cnblogs.com/ji ...
- 2.03.05 原型与原型链
2.03.05 原型 与 原型链 1.构造函数的弊端 介绍:构造函数方法很好用,但是存在一个浪费内存的问题.我们以Dog对象为例: function Dog(name, breed, weight) ...
最新文章
- PI Function Library 应用,公共UDF开发
- 阿里云centos镜像地址以及个发行版本说明
- mysql计算经纬度亮点之间的距离
- 发明,还是发现?数学本质的哲学之辩
- appstore ip地址
- 【python】画四叶草
- 【Python】聊聊Python ctypes 模块
- 图像目标检测和视频目标检测文献综述
- Box Cox Transformation
- 杂谈:电商平台中的图片资源优化实战
- Visionpro Display 添加框线
- “500 - 内部服务器错误。”解决办法
- Android+H5开发
- 使用Proxmox搭建私有云平台
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板...
- iStat Menus Mac系统状态监控软件,为你提供Mac的深度信息。
- 讨论电子工程师的前途
- mongo启动报错,解决办法
- android 修改rom大小,安卓手机修改G1 ROM
- 解决sim800c模块不能连续给多个手机号码发短信问题