深入 javascript 之 原型和原型链!!!
前言
js中有不少比较难以理解的概念,比如 js原型 和 继承 。我曾经很早的时候就看过js原型方面的知识,并在当时写了一篇 博客 作为记录,很显然当时的我只是死记硬背。最近我利用空闲的时间将一些相对比较深入的js概念和用法重新学习,并新建了一个专栏 深入javascript 用于记录和分享。本篇来介绍 js原型和原型链 的基本概念:
概念
每个函数都有一个 prototype
属性,它指的是这个函数的原型对象。而每个 原型对象 都会有一个 constructor
属性,它会指向它的所有者函数。并且我们可以给 原型对象 添加任意属性。
function Person() {}Person.prototype.name = 'foo'console.log(Person.prototype) // { name: "foo", constructor: ƒ Person(), ... }
在 javascript 中,对于生成 对象 的 构造函数 (类) 通常约定为首字母大写。创建对象的方式有很多种,可以使用 new Object()
, Object.create()
或更简单的字面量的方式去创建一个对象。接下来我们使用构造函数的方式来创建一个对象。
创建对象
function Person(name) {this.name = nameconsole.log(this) // { name: "zhangsan" }
}Person.prototype.name = 'foo'const p = new Person('zhangsan')
console.log(p) // { name: "zhangsan" }
从上面的代码中可以看出,构造函数中的 this
就是 实例对象 p ,this
上增加的属性也会成为 实例对象 p
的基本属性。我们可以通过一张图更清晰的了解 实例对象 p:
上图中 实例对象 p 除了有一个基本属性 name
外,还有一个颜色很淡的 __proto__
属性,这个属性指向的就是 该对象的构造函数的原型属性 ,可以查看上面的代码 Person.prototype = { name: "foo", constructor: ƒ Person(), ... }
,也可以在浏览器中打印 p.__proto__ === Person.prototype
自行验证。
__proto__
属性
关于 __proto__
属性, MDN 中有这样的介绍:
警告:
当
Object.prototype.__proto__
已被大多数浏览器厂商所支持的今天,其存在和确切行为仅在ECMAScript 2015规范中被标准化为传统功能,以确保Web浏览器的兼容性。为了更好的支持,建议只使用Object.getPrototypeOf()
。
我们现在知道对象的 __proto__
会指向构造函数的原型,但是这个属性在现在web标准中是已经被废弃的,官方推荐我们使用 Object.getPrototypeOf
来获取某个对象的原型。我们可以看下以下代码的打印:
p.__proto__ === Object.getPrototypeOf(p) // true
关于上述中的为什么 __proto__
属性颜色很淡,是因为谷歌浏览器对于对象不可枚举的属性会做一个特殊的颜色处理,我们可以使用 Object.defineProperty(obj, prop, { enumerable: false })
给某个对象添加一个不可枚举的属性(ps:不能被 for in
遍历或被 Object.keys()
获取)。
原型链
关于原型链我也没有搜索到非常通俗的解释,也很难通过大白话将它描述的易于理解,还是通过以下的代码来解释为什么它会被称之为 原型链:
function Person (name) {this.name = name
}Person.prototype.name = 'PersonName'const p = new Person('pName')console.log(p.name) // pName
delete p.name
console.log(p.name) // PersonName
从以上代码中我们可以看到,获取一个对象的属性的值,它会首先从对象的基本属性里面去找,所以第一次打印的是 "pName"
当我们删除 p
的 name属性
后,再次打印 p.name
会发现它的值为 "PersonName"
,这一次它是从该对象的原型属性里去找的。这是最浅的一层原型链,下面再来一个
深入 javascript 之 原型和原型链!!!相关推荐
- (转)【javascript基础】原型与原型链
原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言 原型是什么 理解原型对象 原型对象 isPrototypeOf hasOwnProper ...
- javascript之原型与原型链
前言 了解JavaScript的原型与原型链有助于我们更深层次的理解这门语言,看过很多相关的文章,写的都很好,下面是根据自己的理解,一步步揭开原型与原型链 正文 一.数据类型 在JavaScr ...
- JavaScript原型与原型链(总结篇)
系列文章推荐 JavaScript原型与原型链(基础篇) JavaScript原型与原型链(进阶篇) JavaScript原型与原型链(总结篇) 1 构造函数和实例对象 构造函数的prototype属 ...
- 《JavaScript 闯关记》之原型及原型链
原型链是一种机制,指的是 JavaScript 每个对象都有一个内置的 __proto__ 属性指向创建它的构造函数的 prototype(原型)属性.原型链的作用是为了实现对象的继承,要理解原型链, ...
- JavaScript对象、原型、原型链知识总结思维导图
这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScri ...
- JavaScript对象——原型与原型链
原型与原型链 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...
- javascript——原型与原型链
一.prototype 在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象. 例如: function Person(age) {this.age = age ...
- 深入理解JavaScript系列(5):强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
- JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目 录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...
- java原型链_深入总结Javascript原型及原型链
本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...
最新文章
- 百面机器学习之特征工程
- 【收藏】在 Linux 上以 All-in-One 模式安装 KubeSphere
- 探索ArrayList自动改变size真相
- Catalan数推导及应用
- 最大子段和 分治与动态规划
- 【土地评价与土地管理】教案 第一章:土地评价要素的选择
- C语言实现用星号在屏幕上打印菱形
- 企业级WEB的负载均衡高可用之LVS+Keepalived(3)
- mysql 半同步 插件_编写半同步复制插件
- python tkinter画笑脸_tkinter绘制红绿灯图案
- 适配器模式 - 上厕所案例
- 如何在 MacBook 上使用低电量模式和高电量模式?
- 如何测量三角形的斜边长度?
- 关于IE上embed自动播放
- Java 动态眨眼 EyesJPanel (整理)
- [nrf51][nrf52] nrfconnect 安装说明指南
- unity obi插件
- 公共自行车点查询_基于预测信息的公共自行车查询系统设计
- 语言哲学宣言2018
- python扫雷 高级算法_Python玩转算法—扫雷