虽然在JavaScript里一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象和函数两大类。在此基础上,JavaScript的原型链逻辑遵从以下通用规则:

  • 对象有__proto__属性,函数有prototype属性;
  • 对象由函数生成;
  • 生成对象时,对象的__proto__属性指向函数的prototype属性。

在没有手动修改__proto__属性的指向时,以上三条便是JavaScript默认原型链指向逻辑。

1、一般情况:

// 创建空对象时,实际上我们是用Object函数来生成对象的:
var o = {}
o.__proto__ === Object.prototype
// ==> true // 我们也可以显式的使用Object函数来创建对象:
var o = Object()
o.__proto__ === Object.prototype
// ==> true // 当我们使用函数来创建自定义的对象时,上面的规则同样适用:
function MyObj(){}
typeof MyObj
// ==> "function"
var mo = new MyObj()
mo.__proto__ === MyObj.prototype
// ==> true

2、函数对象

既然JavaScript里“一切皆对象”,那函数自然也是对象的一种。对于函数作为对象来说,上面的规则同样适用:

// 函数对象都是由Function函数生成的:
>function fn(){}
>fn.__proto__ === Function.prototype
// ==> true // Function函数本身作为对象时,生成它的函数是他自身!
>Function.__proto__ === Function.prototype
// ==> true // Object函数既然是函数,那生成它的函数自然是Function函数咯:
>Object.__proto__ === Function.prototype
// ==> true

来看一个例子:

function Say(name, age) {
this.name = name;
this.age = age;
}
var person = new Say('jone', 30);
console.log(person instanceof Say); // ==> true
console.log(person.__proto__ === Say.prototype); // ==> true
console.log(person.__proto__.constructor === Say.prototype.constructor); // ==> true
var obj = {};
console.log(obj.__proto__ == Object.prototype) // ==> true
var fn = function() {};
console.log(fn.__proto__ === Function.prototype); // ==> true

总结:

js里所有的对象都有__proto__属性(对象,函数),指向构造该对象的构造函数的原型。

只有函数function才具有prototype属性。这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

彻底理解JavaScript中的prototype、__proto__的更多相关文章

  1. 深入理解JavaScript原型:prototype,__proto__和constructor

    JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...

  2. 深入理解Javascript中this, prototype, constructor

    在Javascript面向对象编程中经常需要使用到this,prototype和constructor这3个关键字. 1.首先介绍一下this的使用:this表示当前对象;如果在全局中使用this,则 ...

  3. JavaScript中的prototype和__proto__细致解析

    最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...

  4. 深入理解 JavaScript 中的 class

    在 ES6 规范中,引入了 class 的概念.使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代. 但是JS 中并没有一个真正的 class 原始类型, class 仅仅只 ...

  5. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  6. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  7. 【干货理解】理解javascript中实现MVC的原理

    理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...

  8. 理解javascript中的策略模式

    理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...

  9. 全面理解Javascript中Promise

    全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...

随机推荐

  1. 欢迎使用CSDN的markdown编辑器

    以下是蒻鞫第一次打开CSDN-markdown编译器的温馨提示,感觉CSDN好贴心,不作任何用途,仅为纪念,若存在违法侵权行为,请联系留言,立即删除. List item 这里写 欢迎使用Markdo ...

  2. class的三元表达式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Java实现通过IP获取域名,通过域名获取IP

    一.通过Linux命令实现 ping www.baidu.com nslookup www.baidu.com nslookup 14.215.177.166 为什么这个命令会有一个192.168.1 ...

  4. GDB使用——pwn相关

    目录 寄存器 内存 peda插件命令 x命令详解 后续补充 内容来源 寄存器 1.查看寄存器 2.查看所有寄存器 3.查看某个寄存器 4.修改寄存器的值 内存 1.修改内存值 2.搜索内存 peda插 ...

  5. SQL中AVG()、COUNT()、SUM()等函数对NULL值处理

    一.AVG() 求平均值 注意AVE()忽略NULL值,而不是将其作为“0”参与计算 二.COUNT() 两种用法 1.COUNT(*) 对表中行数进行计数 不管是否有NULL 2.COUNT(字段名 ...

  6. JavaScript WebSocket 使用总结

    翻看之前写的 Highcharts使用总结  和 前后台交互之传参方式,想对 WebSocket 单独写一个使用总结. 一.认识 WebSocket . WebSocket 是 H5 新出的一种协议, ...

  7. Java同步数据结构之ConcurrentHashMap

    前言 这是Java并发包最后一个集合框架的数据结构,其复杂程度也较以往任何数据结构复杂的多,顾名思义ConcurrentHashMap是线程安全版本的HashMap,总所周知HashMap是非线程安全 ...

  8. Cisco Port-Channel 设置(链路聚合--重点)

    Port-Channel 的在实际工作中的主要作用是将两个或多个端口捆绑成为一个虚拟通道. interface Port-channel1 description port(1/0/5-6) swit ...

  9. 【416】Ubuntu 配置

    修改桌面主题:How to Install Desktop Themes on Ubuntu 18.04 LTS 命令行显示短路径:怎样ubuntu下命令行终端显示短路径 gedit 扩展插件:Use ...

  10. thymeleaf中double/float格式化,四舍五入显示两位小数

    private Float balance; 代码: <span class="A124_balance_num" th:text="${#numbers.form ...