如何理解JavaScript中的原型和原型链
首先是一张关系图,避免抽象化理解时产生的困难
Function对象
函数对象是JavaScript学习中不可避免的一部分,而且这一部分相对重要且抽象 函数的创建方式有2种:
- 字面量创建
var foo = function(){
console.log("test");
}
- new 关键字创建实例对象
//let 函数名 = new Function(“参数列表”,”函数体”);
let sum = new Function("num1,num2","return num1+num2");
我们多数在使用new关键字的时候,是用于创建实例对象
那么我们首先来看一下,在使用new关键字创建实例对象的时候,都经历了什么:
- 创建一个新对象
- 链接到原型对象,继承属性和方法
- 将构造函数的作用域赋给新对象(this指向改变到实例对象中)
- 返回新对象
这个时候我们的关注点 原型对象 就出现了:
原型对象prototype
prototype
是一个显式原型属性(也可以叫它原型对象),只有函数才有该属性,通常我们叫这个时候的函数为"构造函数"prototype
的伴随构造函数的声明就会被自动创建- 原型对象
prototype
只有一个属性:constructor
代码举例:
function Student(name,age){
this.name = name;
this.age = age;
}
let s1 = new Student("Tom",17);
首先我们创建了一个构造函数Student
,此时Student
的结构中会出现一个prototype
属性,即原型对象,这是引擎自动给它的,我们可以直接进行使用
- 实例对象
prototype
中的constructor
属性:
此时可以看出constructor
对应的是构造函数,也就是Student
并且这是一个公有不可枚举属性,一旦改变了prototype
,这个属性就会不见,当然可以再手动添加回去
而当我们再使用new关键字创建实例对象s1
之后,我们来看一下s1
的结构:
实例对象s1
中除了在Student
获得的age
,name
属性之外,还有一个__proto__
属性,所以它又是什么东西呢?
__proto__
是什么
__proto__
是每个对象都有的隐式原型属性,指向了创建该对象的构造函数的原型对象prototype
,但是 prototype
是内部私有属性,我们并不能访问到,所以使用__proto__
进行访问
至于__proto__
是如何产生的,上面的new关键字创建函数的时候的第三部"链接到原型,继承属性和方法"的时候就让实例对象,例如s1
拥有了__proto__
属性
从实例对象s1
的__proto__
指向构造函数Student
的prototype
,构成了原型链
通过原型链的概念,我们就不难理解实例对象是如何继承构造函数中原型对象的属性和方法了
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.method = function(){
console.log("我的名字是"+this.name+",我的年龄是"+this.age);
}
let s1 = new Student("Tom",17);
s1.method(); //我的名字是Tom,我的年龄是17
函数的原型链结构
任意的一个函数, 都是相当于 Function 的实例. 类似于 {} 与 new Object() 的关系
function foo () {};
// 告诉解释器, 有一个对象叫 foo, 它是一个函数
// 相当于 new Function() 得到一个 函数对象
- 函数有
__proto__
属性 - 函数的构造函数是 Function
- 函数应该继承自
Function.prototype
Fucntion.prototype
继承自Object.protoype
- 构造函数有prototype, 实例对象才有__proto__指向原型, 构造函数的原型才有 constructor 指向构造函数
intanceof
array instanceof Array
判断 构造函数 Array 的原型 是否在 实例对象 array 的原型链存在
如何理解JavaScript中的原型和原型链的更多相关文章
- 深入理解JavaScript中的继承:原型链篇
一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...
- 深入理解JavaScript中的作用域、作用域链和闭包
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qappleh/article/detai ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- JavaScript中的继承(原型链)
一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...
- Javascript中的对象和原型(3)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(三)(转载)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(一)(转载)
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
- 理解 JavaScript 中的 this
前言 理解this是我们要深入理解 JavaScript 中必不可少的一个步骤,同时只有理解了 this,你才能更加清晰地写出与自己预期一致的 JavaScript 代码. 本文是这系列的第三篇,往期 ...
- 深入理解 JavaScript 中的 class
在 ES6 规范中,引入了 class 的概念.使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代. 但是JS 中并没有一个真正的 class 原始类型, class 仅仅只 ...
随机推荐
- Developing Vert.x Modules with Gradle
========= https://www.techempower.com/benchmarks/#section=data-r12&hw=peak&test=json ======= ...
- Ember.js 看法,精辟
https://ruby-china.org/topics/31451#reply43 都是大牛,或许还是vue适合小白!架不住人多啊!一个非常优秀的产品,客户百十号人,如何发展! 46楼的感想如下, ...
- jquery-1.4.4.min.js无法解析json中result.data问题
如下图该版本无法解析json数据 解决方法引用jquer.min.js,并且将$修改为jQuery
- ValueObject
ValueObject When programming, I often find it's useful to represent things as a compound混合物. A 2D co ...
- BZOJ 4259 残缺的字符串
思路 同样是FFT进行字符串匹配 只不过两个都有通配符 匹配函数再乘一个\(A_i\)即可 代码 #include <cstdio> #include <algorithm> ...
- 比原链(Bytom)先知节点 Windows接入文档
系统要求 我们建议选择知名的VPS服务商,运行比原链节点对算力没有要求,但是请配置尽可能大的磁盘空间. 节点服务器最小配置: 操作系统: Windows/Linux/Docker CPU: 2核 内存 ...
- TCGA一些数据库
最出名,http://www.cbioportal.org/ 特色:最基本的简单分析基因突变.共表达/共突变的基因,下载数据也可以,最常看的应该还是oncoPrint那个. 详细用法:TCGA数据库的 ...
- hadoop配置项笔记 - streaming
stream.map.input.ignoreKey 作用:是否忽略key,只传递值. 默认值:false 我的设置:按需要更改 stream.map.input.field.separator st ...
- 前后端分离之【接口文档管理及数据模拟工具docdoc与dochelper】
前后端分离的常见开发方式是: 后端:接收http请求->根据请求url及params处理对应业务逻辑->将处理结果序列化为json返回 前端:发起http请求并传递相关参数->获取返 ...
- requests库爬取猫眼电影“最受期待榜”榜单 --网络爬虫
目标站点:https://maoyan.com/board/6 # coding:utf8 import requests, re, json from requests.exceptions imp ...