彻底理解JavaScript中的prototype、__proto__
虽然在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__的更多相关文章
- 深入理解JavaScript原型:prototype,__proto__和constructor
JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...
- 深入理解Javascript中this, prototype, constructor
在Javascript面向对象编程中经常需要使用到this,prototype和constructor这3个关键字. 1.首先介绍一下this的使用:this表示当前对象;如果在全局中使用this,则 ...
- JavaScript中的prototype和__proto__细致解析
最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...
- 深入理解 JavaScript 中的 class
在 ES6 规范中,引入了 class 的概念.使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代. 但是JS 中并没有一个真正的 class 原始类型, class 仅仅只 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 【干货理解】理解javascript中实现MVC的原理
理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...
- 理解javascript中的策略模式
理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...
- 全面理解Javascript中Promise
全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...
随机推荐
- 1827:【01NOIP提高组】Car的旅行路线
哇这些真题终于正经起来奥 刚看这道题很不自信觉得自己肯定不能建图成功甚至想过用贪心.. 后来一想发现建图还是蛮容易的,AI我是真的蠢 话说一本通真的很坑啊,把原题的保留1位改成了2 我把在洛谷AC的代 ...
- Linux之jq
什么是jq?jq是Linux下面把文本字符串格式化成json格式的工具 系统环境:centos 7 一.安装 (1)yum安装 a.安装epel源 # wget http://dl.fedorapro ...
- Tkinter 之OptionMenu下拉选择菜单
一.代码示例 import tkinter as tk window = tk.Tk() # 设置窗口大小 winWidth = 600 winHeight = 400 # 获取屏幕分辨率 scree ...
- [PKUSC2018]真实排名——线段树+组合数
题目链接: [PKUSC2018]真实排名 对于每个数$val$分两种情况讨论: 1.当$val$不翻倍时,那么可以翻倍的是权值比$\frac{val-1}{2}$小的和大于等于$val$的. 2.当 ...
- 小程序弹出toast,怎么优化代码
因为toast是会重复调的,所以可以直接写在app里面 在所有的子页面去调这个就好了. 如果是设的none那就是 设置的 就是
- vue tab嵌入iframe切换不刷新,相对完整的方案
说到Vue的简单.便捷.高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件: 本章先说选项卡tab控件的嵌入iframe. 本次主要解决以下问题: 1.tab控件混合 ...
- C++ 中virtual 用法
一.virtual 修饰基类中的函数,派生类重写该函数: #include using namespace std; class A{ public: virtual void display(){ ...
- PorterDuffXfermodeMode.DST_IN
package com.loaderman.customviewdemo.view; import android.animation.ValueAnimator; import android.co ...
- Time类
public class Demo_Timer { /** * @param args * 计时器 * @throws InterruptedException */ public static vo ...
- python定义接口继承类
zxq547 python定义接口继承类invalid syntax解决办法 1 2 3 4 5 6 7 class s_all(metaclass=abc.ABCMeta): #python ...