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

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

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

1、一般情况:

  1. // 创建空对象时,实际上我们是用Object函数来生成对象的:
  2. var o = {}
  3. o.__proto__ === Object.prototype
  4. // ==> true
  5. // 我们也可以显式的使用Object函数来创建对象:
  6. var o = Object()
  7. o.__proto__ === Object.prototype
  8. // ==> true
  9. // 当我们使用函数来创建自定义的对象时,上面的规则同样适用:
  10. function MyObj(){}
  11. typeof MyObj
  12. // ==> "function"
  13. var mo = new MyObj()
  14. mo.__proto__ === MyObj.prototype
  15. // ==> true

2、函数对象

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

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

来看一个例子:

  1. function Say(name, age) {
  2. this.name = name;
  3. this.age = age;
  4. }
  5. var person = new Say('jone', 30);
  6. console.log(person instanceof Say); // ==> true
  7. console.log(person.__proto__ === Say.prototype); // ==> true
  8. console.log(person.__proto__.constructor === Say.prototype.constructor); // ==> true
  9. var obj = {};
  10. console.log(obj.__proto__ == Object.prototype) // ==> true
  11. var fn = function() {};
  12. 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. 1827:【01NOIP提高组】Car的旅行路线

    哇这些真题终于正经起来奥 刚看这道题很不自信觉得自己肯定不能建图成功甚至想过用贪心.. 后来一想发现建图还是蛮容易的,AI我是真的蠢 话说一本通真的很坑啊,把原题的保留1位改成了2 我把在洛谷AC的代 ...

  2. Linux之jq

    什么是jq?jq是Linux下面把文本字符串格式化成json格式的工具 系统环境:centos 7 一.安装 (1)yum安装 a.安装epel源 # wget http://dl.fedorapro ...

  3. Tkinter 之OptionMenu下拉选择菜单

    一.代码示例 import tkinter as tk window = tk.Tk() # 设置窗口大小 winWidth = 600 winHeight = 400 # 获取屏幕分辨率 scree ...

  4. [PKUSC2018]真实排名——线段树+组合数

    题目链接: [PKUSC2018]真实排名 对于每个数$val$分两种情况讨论: 1.当$val$不翻倍时,那么可以翻倍的是权值比$\frac{val-1}{2}$小的和大于等于$val$的. 2.当 ...

  5. 小程序弹出toast,怎么优化代码

    因为toast是会重复调的,所以可以直接写在app里面 在所有的子页面去调这个就好了. 如果是设的none那就是 设置的 就是

  6. vue tab嵌入iframe切换不刷新,相对完整的方案

    说到Vue的简单.便捷.高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件: 本章先说选项卡tab控件的嵌入iframe. 本次主要解决以下问题: 1.tab控件混合 ...

  7. C++ 中virtual 用法

    一.virtual 修饰基类中的函数,派生类重写该函数: #include using namespace std; class A{ public: virtual void display(){ ...

  8. PorterDuffXfermodeMode.DST_IN

    package com.loaderman.customviewdemo.view; import android.animation.ValueAnimator; import android.co ...

  9. Time类

    public class Demo_Timer { /** * @param args * 计时器 * @throws InterruptedException */ public static vo ...

  10. python定义接口继承类

    zxq547 python定义接口继承类invalid syntax解决办法 1 2 3 4 5 6 7 class s_all(metaclass=abc.ABCMeta):     #python ...