总结javascript基础概念(三):js对象原型链

雾桩超类
• 阅读 1326

主要问题:
1、构造函数和普通函数有区别么?什么区别?
2、prototype和__proto__有什么不同?
3、instanceof的作用机制,为什么有限制?
4、ES6的相关方法,Class继承原理?

三、对象与原型

(一)、数据类型
Js共有6种数据类型:

5种基本数据类型 undefined,null,string,number,Boolean
1种复杂数据类型 Object

Object 数据类型可以分为两种:

函数(包括各种原生、自定义的构造函数):
    Object(),Function(),Array(),Date(),,,
对象实例(由函数创建的) {,,},[,,]...

(二)、创建对象
<script>

var Person = function () { };
var p = new Person();

</script>
很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:
<1> var p={}; 也就是说,初始化一个对象p。
<2> p.__proto__=Person.prototype;
<3> Person.call(p); 也就是说构造p,也可以称之为初始化p。//执行构造函数的一步

说明:对象可以通过函数来创建。对象都是通过函数创建的。

总结javascript基础概念(三):js对象原型链

每个函数都有一个prototype属性,指向一个对象,对象默认只有一个叫做constructor的属性,指向这个函数本身。

总结javascript基础概念(三):js对象原型链

Object是最顶级的构造函数,prototype对象里面,就有好几个其他属性。

总结javascript基础概念(三):js对象原型链

每个对象都有一个__proto__,可成为隐式原型。

总结javascript基础概念(三):js对象原型链

自定义函数的prototype本质上就是普通对象实例,都是被Object创建,所以它的__proto__指向的就是Object.prototype。Object.prototype确实一个特例——它的__proto__指向的是null。

(三)、instanceof

<script>

function B(){};
var A = new B();
console.log(A instanceof B);

</script>

Instanceof运算符的第一个变量是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。
Instanceof的判断队则是:沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。
所以instanceof 无法检测不同iframe创建的对象实例。

(四)、ES6新方法,新特性
Object.setPrototypeOf(),Object.getPrototypeOf()。新增加几个方法直接操作对象的__proto__属性,实现对象之间的联系。
Class的对象语法糖,模仿面向对象的语法,勉强提供了JS中的类的概念。然而并没有改变原型链的实质,只是更加隐藏的更深。

(五)、继承与委托
与纯净面向对象的语言不同,JS本质并没有类和实例的概念。JS中一切皆对象(除了少数基本类型),是真正的面向“对象”。
构造函数与普通函数并没有区别,只是调用方式不同。
与竭力模仿面向对象的方式来使用JS,使得代码继承逻辑十分复杂抽象。
相比之下,使用委托的思想,直接修改对象的__proto__属性指向,来访问委托对象上的属性和方法,在逻辑上更简洁直观。

点赞
收藏
评论区
推荐文章
希望的天 希望的天
4年前
轻松搞定构造函数,new,实例对象,原型,原型链,ES6中的类
本文主要是之前我的《一文搞懂JS系列》的后续,至于为什么标题变了,因为标题字数写不下,对于JS基础感兴趣的可以看看我之前写的系列。标题变初心不变,接下来开始今天的内容。前言本文主要讲的就是函数,方法,构造函数,new操作符,实例对象,原型,原型链,ES6类。因为这几个知识点都是有互通的关系的,所以一起讲,方便大家疏通整个关于这方面
凝雪探世界 凝雪探世界
4年前
js-Answers一
JavaScript的组成JavaScript由以下三部分组成:1.ECMAScript(核心):JavaScript语言基础2.DOM(文档对象模型):规定了访问HTML和XML的接口3.BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法JS的基本数据类型和引用数据类型
菜园前端 菜园前端
2年前
前端学习重点-原型与原型链
原文链接:什么是原型?每一个函数都包含一个prototype属性,这是一个指针指向"原型对象"(prototypeobject),也就是我们平时说的原型。每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象(实例)会从原型对象上继承属性
晴空闲云 晴空闲云
4年前
JavaScript中isPrototypeOf函数详解
有时看一些框架源码的时候,会碰到isPrototypeOf()这个函数,那么这个函数有什么作用呢?isPrototypeOf()isPrototypeOf()是Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回true,否则就返回false。这个函数理解的关键是在原型链上,这个据说是JavaScript
明月 明月
3年前
JS数据类型的几种判断方法
1.typeof(常用)typeof是一个运算符,返回值是一个字符串,用来说明变量的数据类型,可以用来判断number,string,object,boolean,function,undefined,symbol这七种类型.2.instanceof(知道即可)instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上,返回值为布尔值,用于指示一个变量是否属于某个对象的实例3.Object.prototype.to
首发10万字Java开发实战文档,涨姿势了!
Java基础1Java语言的三大特性2.Java语言主要特性3\.JDK和JRE有什么区别4.Java基本数据类型及其封装类5.如果main方法被声明为private会怎样?6.说明下publicstaticvoidmain(StringargsQ)这段声明里每个关键字的作用7.与equals的区别8.Object有哪些公用方法9.为什么Jav
Souleigh ✨ Souleigh ✨
5年前
Js中 constructor, prototype, __proto__ 详解
本文为了解决以下问题:__proto__(实际原型)和prototype(原型属性)不一样!!!constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)prototype属性(constructor.prototype原型对象)__proto__属性(实例指向原型对象的指针)<br/首先弄清楚几个概念:<br/
Stella981 Stella981
4年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
Stella981 Stella981
4年前
Javascript 是如何体现继承的 ?
js继承的概念js里常用的如下两种继承方式:原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现在面向对象的语言中,我们使用类来创建一个自定义对象
Wesley13 Wesley13
4年前
JS函数高级
原型与原型链所有函数都有一个特别的属性:prototype:显式原型属性所有实例对象都有一个特别的属性:__proto__:隐式原型属性显式原型与隐式原型的关系函数的prototype:定义函数时被自动赋值,值默认为{},即用为原型对象
Wesley13 Wesley13
4年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
雾桩超类
雾桩超类
Lv1
近乡情更怯,不敢问来人。
文章
3
粉丝
0
获赞
0