三张图带你搞懂JavaScript的原型对象与原型链

 更新时间:2022年07月05日 15:23:10   作者:水乙  
这篇文章介绍了JavaScript的原型对象与原型链,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了。所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚。

我们知道原型是一个对象,其他对象可以通过它实现属性继承。但是尼玛除了prototype,又有一个__proto__是用来干嘛的?长那么像,让人怎么区分呢?它们都指向谁,那么混乱怎么记啊?原型链又是什么鬼?相信不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,下面用三张简单的图,配合一些示例代码来理解一下。

一、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() {}

/*1、字面量方式*/
var a = {};
console.log(a.__proto__);  //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、构造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false(此处即为图1中的例外情况)

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}(即构造器function A 的原型对象)
console.log(a.__proto__.__proto__); //Object {}(即构造器function Object 的原型对象)
console.log(a.__proto__.__proto__.__proto__); //null

到此这篇关于JavaScript原型对象与原型链的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js转义字符介绍

    js转义字符介绍

    有时候js得到json串中含有"<"和">" ,那么两个尖括号中间的文字是无法在html页面显示出来的,必须用转义字符
    2013-11-11
  • js基石系列学习之错误类型

    js基石系列学习之错误类型

    这篇文章主要为大家介绍了js基石系列学习之错误类型示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 详解JavaScript中|单竖杠运算符的使用方法

    详解JavaScript中|单竖杠运算符的使用方法

    JavaScript中|单竖杠通常被用来对浮点型数字进行取证,这里同时也介绍了单竖杠的运算规则,下面我们就来详解JavaScript中|单竖杠的使用方法
    2016-05-05
  • JavaScript实现关键字高亮功能

    JavaScript实现关键字高亮功能

    关键词高亮技术各大CMS基本上都有,但基本都是后端代码来实现的,今天我们探讨下如何使用javascript来实现代码高亮技术。
    2014-11-11
  • 在javascript中创建对象的各种模式解析

    在javascript中创建对象的各种模式解析

    下面小编就为大家带来一篇在javascript中创建对象的各种模式解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JavaScript中let避免闭包造成问题

    JavaScript中let避免闭包造成问题

    这篇文章主要介绍了JavaScript中let避免闭包造成问题,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • javascript基本语法

    javascript基本语法

    本文通过运算符、表达式、语句、函数、对象、事件、变量讲解javascript的基本语法,需要的朋友可以参考下。
    2016-05-05
  • cancelBubble阻止事件冒泡

    cancelBubble阻止事件冒泡

    cancelBubble阻止事件冒泡...
    2006-10-10
  • 详解js类型判断

    详解js类型判断

    本篇文章给大家详细分析了js类型判断的相关知识点内容,有兴趣的朋友跟着学习下吧。
    2018-05-05
  • JavaScript学习笔记整理_用于模式匹配的String方法

    JavaScript学习笔记整理_用于模式匹配的String方法

    下面小编就为大家带来一篇JavaScript学习笔记整理_用于模式匹配的String方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论