JS基础-该如何理解原型、原型链?
JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个概念一知半解,碰到问题靠“猜”,却不理解它的规则!
prototype
只有函数有prototype属性
let a = {}
let b = function () { }
console.log(a.prototype) // undefined
console.log(b.prototype) // { constructor: function(){...} }
Object.prototype怎么解释?
其实Object
是一个全局对象,也是一个构造函数,以及其他基本类型的全局对象也都是构造函数:
function outTypeName(data, type) {
let typeName = Object.prototype.toString.call(data)
console.log(typeName)
}
outTypeName(Object) //[object Function]
outTypeName(String) // [object Function]
outTypeName(Number) // [object Function]
为什么只有函数有prototype属性
JS通过new
来生成对象,但是仅靠构造函数,每次生成的对象都不一样。
有时候需要在两个对象之间共享属性,由于JS在设计之初没有类的概念,所以JS使用函数的prototype
来处理这部分需要被共享的属性,通过函数的prototype
来模拟类:
当创建一个函数时,JS会自动为函数添加prototype
属性,值是一个有constructor
的对象。
以下是共享属性prototype
的栗子:
function People(name) {
this.name = name
}
People.prototype.age = 23 // 岁数
// 创建两个实例
let People1 = new People('OBKoro1')
let People2 = new People('扣肉')
People.prototype.age = 24 // 长大了一岁
console.log(People1.age, People2.age) // 24 24
为什么People1
和People2
可以访问到People.prototype.age
?
原因是:People1
和People2
的原型是People.prototype
,答案在下方的:构造函数是什么以及它做了什么。
原型链
__proto__
和Object.getPrototypeOf(target)
: 对象的原型
__proto__
是对象实例和它的构造函数之间建立的链接,它的值是:构造函数的`prototype。
也就是说:__proto__
的值是它所对应的原型对象,是某个函数的prototype
Object.getPrototypeOf(target)
全等于__proto__
。
它是ES6的标准,兼容IE9,主流浏览器也都支持,MDN,本文将以Object.getPrototypeOf(target)
指代__proto__
。
不要再使用__proto__
:
本段摘自阮一峰-ES6入门,具体解析请点击链接查看
__proto__
属性没有写入 ES6 的正文,而是写入了附录。原因是它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6。
标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。
所以无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,应该使用:
Object.getPrototypeOf(target)
(读操作)、Object.setPrototypeOf(target)
(写操作)、Object.create(target)
(生成操作)代替
构造函数是什么、它做了什么
出自《你不知道的在js》:在js中, 实际上并不存在所谓的'构造函数',只有对于函数的'构造调用'。
上文一直提到构造函数,所谓的构造函数,实际上就是通过关键字new
来调用的函数:
let newObj = new someFn() // 构造调用函数
构造/new调用函数的时候做了什么:
- 创建一个全新的对象。
- 这个新对象的原型(
Object.getPrototypeOf(target)
)指向构造函数的prototype
对象。 - 该函数的this会绑定在新创建的对象上。
- 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
- 我们称这个新对象为构造函数的实例。
原型继承就是利用构造调用函数的特性:
SubType.prototype = new SuperType(); // 原型继承:SubType继承SuperType
// 挂载SuperType的this和prototype的属性和方法到SubType.prototype上
- 构造调用的第二点:将新对象的
Object.getPrototypeOf(target)
指向函数的prototype
- 构造调用的第三点:该函数的this会绑定在新创建的对象上。
- 新对象赋值给
SubType.prototype
原型类型有个缺点:多个实例对引用类型的操作会被篡改。
因为每次实例化引用类型的数据都指向同一个地址,所以它们读/写的是同一个数据,当一个实例对其进行操作,其他实例的数据就会一起更改。
原型链是什么
来看个例子:
function foo() { }
const newObj = new foo() // 构造调用foo 返回一个新对象
const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取newObj的原型对象
newObj__proto__ === foo.prototype // true 验证newObj的原型指向foo
const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型
foo__proto__ === Object.prototype // true foo.prototype的原型是Object.prototype
``
如果用以前的语法,从`newObj`查找`foo`的原型,是这样的:
```js
newObj.__proto__.__proto__ // 这种关系就是原型链
可以用以下三句话来理解原型链:
- 每个对象都拥有一个原型对象:
newObj
的原型是foo.prototype
。 - 对象的原型可能也是继承其他原型对象的:
foo.prototype
也有它的原型Object.prototype
。 - 一层一层的,以此类推,这种关系就是原型链。
一个对象是否在另一个对象的原型链上
如果一个对象存在另一个对象的原型链上,我们可以说:它们是继承关系。
判断方式有两种,但都是根据构造函数的prototype
是否在原型链上来判断的:
instanceof
: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置
语法:object instanceof constructor
let test = function () { }
let testObject = new test();
testObject instanceof test // true test.prototype在testObject的原型链上
testObject instanceof Function // false Function.prototype 不在testObject的原型链上
testObject instanceof Object // true Object.prototype在testObject的原型链上
isPrototypeOf
:测试一个对象是否存在于另一个对象的原型链上
语法:prototypeObj.isPrototypeOf(object)
let test = function () { }
let testObject = new test();
test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型链上
Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型链上
原型链的终点: Object.prototype
Object.prototype
是原型链的终点,所有对象都是从它继承了方法和属性。
Object.prototype
没有原型对象:
const proto = Object.getPrototypeOf(Object.prototype) // null
下面是两个验证例子,有疑虑的同学多写几个测试用例印证一下。
字符串原型链的终点:Object.prototype
let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象
函数原型链的终点:Object.prototype
let test = function () { }
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test的原型是Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true
原型链用来做什么?
属性查找:
如果试图访问对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性,以此类推
我们用一个例子来形象说明一下:
let test = '由String函数构造出来的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是String对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String对象的原型是Object对象
当你访问test
的某个属性时,浏览器会进行以下查找:
- 浏览器首先查找
test
本身 - 接着查找它的原型对象:
String.prototype
- 最后查找
String.prototype
的原型对象:Object.prototype
- 一旦在原型链上找到该属性,就会立即返回该属性,停止查找。
- 原型链上的原型都没有找到的话,返回
undefiend
这种查找机制还解释了字符串为何会有自带的方法: slice
/split
/indexOf
等。
准确的说:
- 这些属性和方法是定义在
String
这个全局对象/函数上的。 - 字符串的原型指向了
String
函数的prototype
。 - 之后通过查找原型链,在String函数的
prototype
中找到这些属性和方法。
拒绝查找原型链:
hasOwnProperty
: 指示对象自身属性中是否具有指定的属性
语法:obj.hasOwnProperty(prop)
参数: prop
要查找的属性
返回值: 用来判断某个对象是否含有指定的属性的Boolean
。
let test ={ 'OBKoro1': '扣肉' }
test.hasOwnProperty('OBKoro1'); // true
test.hasOwnProperty('toString'); // false test本身没查找到toString
这个API
是挂载在object.prototype
上,所有对象都可以使用,API会忽略掉那些从原型链上继承到的属性。
扩展:
实例的属性
你知道构造函数的实例对象上有哪些属性吗?这些属性分别挂载在哪个地方?原因是什么?
function foo() {
this.some = '222'
let ccc = 'ccc'
foo.obkoro1 = 'obkoro1'
foo.prototype.a = 'aaa'
}
foo.koro = '扣肉'
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪个地方
foo.prototype.test = 'test2' // 重新赋值
上面这道是考察JS
基础的题,很多人都没说对,原因是没有彻底掌握this
、原型链
、函数
。
想一下再看解析:
想一下再看解析:
想一下再看解析:
想一下再看解析:
想一下再看解析:
this.some
:foo1
对象的属性
通过构造调用foo
的this
指向foo1
,所以this.some
挂载在foo1
对象下。
属性查找: foo1.some
foo1.some
直接读取foo1
的属性。
foo1.test
、foo1.a
:foo1
对象的原型
根据上文提到的:构造/new调用函数的时候会创建一个新对象(foo1
),自动将foo1
的原型(Object.getPrototypeOf(foo1)
)指向构造函数的prototype对象。
构造调用会执行函数,所以 foo.prototype.a = 'aaaaa'
也会执行,单就赋值这个层面来说写在foo
外面和写在foo
里面是一样的。
属性查找:foo1.test
、foo1.a
foo1
本身没有找到,继续查找foo1
的原型Object.getPrototypeOf(foo1)
上找到了a
和test
,返回它们,停止查找。
foo1.obkoro1
和foo1.koro
:返回undefined
静态属性: foo.obkoro1
、foo.koro
函数在JS中是一等公民,它也是一个对象, 用来模拟类。
这两个属性跟foo1
没有关系,它是对象foo
上的两个属性(类似函数的:arguments
/prototype
/length
等属性),称为静态属性。
它们只能通过foo.obkoro1
和foo.koro
来访问。
原型对象改变,原型链下游获取的值也会改变
上面那个例子中的foo1.test
的值是什么?
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1`上有哪些属性,这些属性分别挂载在哪个地方
foo.prototype.test = 'test2' // 重新赋值
foo1.test
的值是test2
,原因是:foo1
的原型对象是Object.getPrototypeOf(foo1)
存的指针,指向foo.prototype
的内存地址,不是拷贝,每次读取的值都是当前foo.prototype
的最新值。
打印foo1
:
小结
写了好几天,之前网上很多图文博客,那些线指来指去,就我个人看来还是比较难以理解的,所以本文纯文字的形式来描述这些概念,相信认真看完的同学肯定都有所收获,如果没看懂的话,建议多看几遍,这部分概念真的很重要!
PS:实际上还有很多引申出来的东西没写全,准备放到其他文章中去写。
觉得我的博客对你有帮助的话,就给我点个Star吧!
前端进阶积累、公众号、GitHub、wx:OBkoro1、邮箱:obkoro1@foxmail.com
以上2019/8/25
作者:OBKoro1
参考资料:
从__proto__和prototype来深入理解JS对象和原型链
前端进阶积累、公众号、GitHub、wx:OBkoro1、邮箱:obkoro1@foxmail.com
JS基础-该如何理解原型、原型链?的更多相关文章
- Js基础知识(二) - 原型链与继承精彩的讲解
作用域.原型链.继承与闭包详解 注意:本章讲的是在es6之前的原型链与继承.es6引入了类的概念,只是在写法上有所不同,原理是一样的. 几个面试常问的几个问题,你是否知道 instanceof的原理 ...
- js基础梳理-如何理解作用域和作用域链?
本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...
- 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链
1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...
- JS基础-全方面掌握继承
前言 上篇文章详细解析了原型.原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行, ...
- js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?
日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉.今天,就对这两个概念梳理一 ...
- 【js基础修炼之路】— 我理解的原型链
提起原型链,大家并不陌生,但是对于新人来说一提到原型方面的东西就会比较懵.在我自一次面试的时候,面试官也给我提了这样的问题,当时就按照我的理解说了一些,但是很肤浅,在此我希望给刚入门的前端小伙伴聊一下 ...
- js基础系列之【原型和原型链】
声明:形成本文的出发点仅仅是个人总结记录,避免遗忘,并非详实的教程:文中引用了经过个人加工的其它作者的内容,并非原创.学海无涯 引入问题 一般我们是这样写的: (需求驱动技术,疑问驱动进步) // 构 ...
- JS基础——JavaScript原型和原型链及实际应用
构造函数 function Stu(name,age){ this.name=name; this.age=age; } instanceof 查看引用类型对象是属于哪个构造函数的方法,通过__pro ...
- 深入理解javascript原型和闭包(14)——从【自由变量】到【作用域链】
先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...
随机推荐
- Excel催化剂开源第32波-VSTO开发的插件让WPS顺利调用的方法-注册表增加注册信息
VSTO插件开发完成后,鉴于现在WPS用户也不少,很多时候用户没办法用OFFICE软件,只能在WPS环境下办公,VSTO开发的插件,只需增加一句注册表信息,即可让WPS识别到并调用VSTO开发的功能, ...
- 微信小程序踩坑日记2——实时访问数据库并渲染UI
0. 引言 主要讲讲对于实时访问数据库并渲染UI我的解决方法. 一开始查到了随让小程序是单线程的,但是有一个基本上是封装的worker线程,相当于可以自己自定义(类似于Android开发里的handl ...
- Flutter学习笔记(11)--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- kubernetes二进制高可用部署实战
环境: 192.168.30.20 VIP(虚拟) 192.168.30.21 master1 192.168.30.22 master2 192.168.30.23 node1 192.168.30 ...
- C#托盘程序设置
打开Microsoft Visual Studio 2010,新建解决方案--添加项目--托盘的实现 从工具栏里,把NotifyIcon控件拖到窗体上,并设置属性: 1.visible 设置默 ...
- 执行shell脚本的四种方式
这篇文章主要介绍了Linux中执行shell脚本的4种方法,即总结在Linux中运行shell脚本的4种方法. 前提:bash shell 脚本的方法有多种,假设我们编写好的shell脚本的文件名为h ...
- Java实现常见的排序算法
一.排序算法 常见的排序算法主要分为下面几类: 选择排序 堆排序 冒泡排序 快速排序 插入排序 希尔排序 归并排序 桶式排序 基数排序 本文主要介绍选择排序.堆排序.冒泡排序.快速排序和归并排序的原理 ...
- vue 初始化table数据,数据闪现的问题
使用的iview,很简单的一个table,可以扩展显示,我这里则是更改了一下,显示的也是表格,内容为明细数据. 原以为很简单的可以直接调用方法,进行数据的渲染,但是没想到,数据只是一闪而过. 百思不得 ...
- 【iOS】UIButton 常用属性
发现 UIButton 的相关属性不熟悉了……常用的一些属性代码如下: UIButton *add = [UIButton buttonWithType:UIButtonTypeCustom]; ad ...
- Charles PC端和手机端抓取HTTP和HTTPS协议请求、HTTPS通用抓包规则
一:HTTP和HTTPS的区别 HTTP是超文本传输协议,被用在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,因此HTTP协议不适合传输一些敏感信息, ...