原型链 | 显示原型、隐式原型 | 构造关系constructor | instanceof
1、原型关系 prototype
显式原型:prototype
隐式原型:__proto__
1. 每个函数function都有一个prototype,即显式原型(属性)
2. 每个实例对象都有一个__proto__,可称为隐式原型(属性)
3. 对象的隐式原型的值为其对应构造函数的显式原型的值
4. 总结:
* 对象的__proto__,默认指向其构造函数的prototype
* Object.prototype的__proto__属性指向null。(Object构造函数的原型的隐式原型指向null)
* __proto__虽然可以改写,但性能消耗大、风险高、最重要的是被“已被W3C废弃”(链接),可以用等效替换方法 Object.getPrototypeOf(obj) == obj.__proto__
// Function 与 Object 原型链关系
console.log(Function.prototype.__proto__ == Object.prototype) // true
console.log(Object.prototype.__proto__) // null // 声明的函数
function fun1(){}
console.log(fun1.prototype.__proto__ == Object.prototype) // true
console.log(fun1.prototype.__proto__ == Function.prototype.__proto__) // true var o1 = new fun1()
function fun2(){}
fun2.prototype = o1
console.log(fun2.prototype != fun1.prototype) //true var o2 = new fun2()
console.log(o2.__proto__ == fun2.prototype) // true
// 创建一个对象、空对象 的隐式原型指向 Object的原型
var obj = new Object() // 等效 var obj = {}
console.log(obj.__proto__ == Object.prototype) // true
2、构造关系 constructor
* 对象和函数都有construction属性
* Object的construction属性指向Function,而Function的construction指向自己
* constructor属性并不是实例化的对象的属性,而是其构造函数的原型对象的constructor属性,会通过原型链往上一直找到头
* 可以用来查找原型链的“尽头”(实际创建的构造函数的尽头),constructor也可以重指向
// Function 与 Object 构造constructor 关系
console.log(Object.constructor == Function) // true
console.log(Function.constructor == Function) // true // 通过关键字function 进行函数声明
function fun1(){}
//通过函数声明的函数,constructor指向 Function
console.log(fun1.constructor == Function) var o1 = new fun1()
// 通过构造函数创建的对象,constructor指向它的构造函数
console.log(o1.constructor == fun1) //true function fun2(){}
fun2.prototype = o1
var o2 = new fun2()
// constructor默认不是指向 实例化对象的构造函数
console.log(o2.constructor != fun2) //true
// 是指向其构造函数的原型的constructor,通过原型链向上一直找到头
console.log(o2.constructor == fun1) //true function fun3(){}
fun3.prototype = o2
var o3 = new fun3()
// o3这个孙级对象实例,constructor依然指向祖级原型的constructor
console.log(o3.constructor == fun1) //true
// 所以有时候,会重定向constructor
o3.constructor = fun3
console.log(o3.constructor == fun3)
原型链 | 显示原型、隐式原型 | 构造关系constructor | instanceof的更多相关文章
- JS 原型链 prototypt 和隐式原型 _proto_
prototype(原型) : 对象的一个属性,此属性使您有能力向对象添加属性和方法,当访问对象不存在属性是会自动到 prototype 中找 _proto_(隐式原型): 此对象构造函数(类)的原 ...
- 构造函数、原型对象prototype、实例、隐式原型__proto__的理解
(欢迎一起探讨,如果有什么地方写的不准确或是不正确也欢迎大家指出来~) PS: 内容中的__proto__可能会被markdown语法导致显示为proto. 建议将构造函数中的方法都定义到构造函数的原 ...
- JS高阶---显式原型和隐式原型
前言: 1.函数对象即函数的prototype原型属性指向原型对象,在创建函数时便存在,默认为空Object 2.实例对象的__proto__隐式原型在实例化创建实例时产生,值等于构造函数的显式pro ...
- JavaScript 隐式原型(_proto_)与显示原型(prototype)
作者:苏墨橘链接:https://www.zhihu.com/question/34183746/answer/59043879来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 275 原型与原型链:显式原型prototype ,隐式原型__proto__,隐式原型链,原型链_属性问题,给原型对象添加属性/方法
1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...
- 深入理解javascript原型和闭包(4)——隐式原型
注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设计(第三版)>第6章:面向对象的程序设计. 上节已经提到 ...
- 深入理解js——隐式原型
每个函数都有一个prototye(原型),而每个对象都有一个_proto_,可成为隐式原型. _proto_是一个隐藏的属性,javascript不希望开发者用到这个属性值,有的低版本浏览器甚至不支持 ...
- 【学习笔记】深入理解js原型和闭包(4)——隐式原型
注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设计(第三版)>第6章:面向对象的程序设计. 上节已经提到 ...
- 深入理解javascript原型和闭包(4)——隐式原型 (转载)
深入理解javascript原型和闭包(4)——隐式原型 注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设 ...
随机推荐
- VSC 创建 Net Core 3.0 版本 WebAPI
首先确保安装好了VSC(这个算是废话......), 并且为VSC安装了Microsoft提供的C#插件, 以及.Net Core 3.0, 然后就可以开始了 1. 使用VSC打开已经创建好的文件夹( ...
- 使用VeeValidate的data-vv-scope指定验证范围
<div class="login" v-show="activeTab === 1"> <div class="panel-con ...
- RESTful 架构风格
在移动互联网的大潮下,『微服务』的概念也越来越被大家接受并应用于实践,日益增多的web service逐渐统一于RESTful 架构风格,如果开发者对RESTful 架构风格不甚了解,则开发出的所谓R ...
- Parallel.ForEach 使用多线遍历循环
Parallel.ForEach相对于foreach是多线程,并行操作;foreach是单线程品德操作. static void Main(string[] args) { Console.Write ...
- 松软科技web课堂:JavaScript 布尔(逻辑)
JavaScript 布尔(逻辑)代表两个值之一:true 或 false. 布尔值 通常,在编程中,您会需要只能有两个值之一的数据类型,比如 YES / NO ON / OFF TRUE / FAL ...
- iviewer插件
jQuery-iviewer插件的使用 iviewer是一个具有缩放和图像旋转功能的图像查看小部件. 在jQuery官网下载后,有很多文件. 直接把文件夹解压拖到项目里. 然后再html中引入主要的文 ...
- JavaScript 标准内置对象Promise使用学习总结
Javascript标准内置对象Promise使用学习总结 by:授客 QQ:1033553122 1. 基础用法 var condition = true; let p = new Prom ...
- Android项目实战之高仿网易云音乐创建项目和配置
这一节我们来讲解创建项目:说道大家可能就会说了,创建项目还有谁不会啊,还需要讲吗,别急听我慢慢到来,肯定有你不知道的. 使用项目Android Studio创建项目我们这里就不讲解了,主要是讲解如何配 ...
- CSS新特性之3D转换
1. 三维坐标系 x轴:水平向右(右边是正,左边是负) y轴:垂直向下(向下是正,向上是负) z轴:垂直屏幕(向外是正,向里是负) 2. 3D转换 3D转换中最常用的是3D位移和3D旋转.主要知识点如 ...
- JS时间戳与时间字符串之间的相互转换
时间字符串 转 时间戳 /** * 时间字符串 转 时间戳 * @param {String} time_str 时间字符串(格式"2014-07-10 10:21:12") * ...