彻底深刻理解js原型链之prototype,__proto__以及constructor(一)

简介: 以下概念请花费一定的时间彻底理解,才能进行下一步,思考题一定要思考,这样才能彻底掌握原型链的知识点,教程中如果有任何的错误不足请指正!

前言

以下概念请花费一定的时间彻底理解,才能进行下一步,思考题一定要思考,这样才能彻底掌握原型链的知识点,教程中如果有任何的错误不足请指正!

函数对象

由function创造出来的函数,比如:


    function a(){};
    var b=function(){};
    

系统内置的函数对象

Function,Object,Array,String,Number

只有函数对象才有 prototype属性 ,重要的事情说三遍!

思考: js的引用数据类型都属于函数对象吗?

普通对象

除开函数对象之外的对象都是普通对象

var b='qwe'; // b 是字符串类型,属于普通对象
var c=123;; // c 是数字类型,属于普通对象

思考:js有五种基本类型:Undefined,Null,Boolean,Number和String,他们都是属于普通对象吗?

原型对象

prototype属性也叫原型对象,主要是为了实现继承和共享属性;

可以说我们的每一次编程,内在都有原型对象来发挥着作用,如果你没有掌握原型对象的含义,那么你的js还没有真正的入门!

function a(){};

首先对象 a 是由Function创造出来,是函数对象;那么根据我们以上的教程,a 就有了prototype属性,那么这个原型对象是怎么创造出来的呢?
来看下面这个例子:

var temp = new a();
a.prototype=new Object();
a.prototype = temp;

那么a的prototype属性就是这样创造出来的;

思考:原型对象prototype 属于函数对象吗?

指针__proto__

JavaScript中,万物皆对象!所有的对象obj都具有proto属性(null和undefined除外),可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型

请看以下例子帮助理解:

function a(){};
var obj=new a();
console.log(a.__proto__===Function.prototype); //true
console.log(a.prototype.__proto__===Object.prototype); //true
console.log(obj.__proto__===a.prototype); //true

思考一下,var obj={}; obj.prototype.__proto__指向谁?

构造函数属性constructor

假设 obj 是由函数对象 a 由new运算创造出来的,那么obj的constructor 的属性就存放着一个对 a 的引用,通过这个构造函数,我们还可以为 a添加其他属性和方法,
这个属性的最初设计是为了检测对象的数据类型,不过后来人们通过此属性的特性做了更多的事情

请看以下例子:

function a(){};
var obj=new a();
obj.constructor.b=`我是a的新的属性`;
console.log(a.b); //我是a的新的属性
console.log(a.constructor===Function); //true
console.log(a.prototype.constructor===a); //true
console.log(obj.constructor===a); //true

函数a是由Function创造出来,那么它的constructor指向的Function,obj是由new a()方式创造出来,那么obj.constructor理应指向a

思考:a.prototype.__proto__.constructor指向谁?

思考题解答

函数对象思考题解答

思考: js的引用数据类型都属于函数对象吗?

引用类型值:指的是那些保存在堆内存中的对象,意思是,变量中保存的实际上只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象

那么数组,普通对象,函数对象都算是引用数据类型,引用数据类型范围包含函数对象的范围

普通对象思考题解答

思考:js有五种基本类型:Undefined,Null,Boolean,Number和String,他们都是属于普通对象吗?

基本类型值:指的是保存在栈内存中的简单数据段;除开函数对象之外的对象都是普通对象,那么普通对象范围是包含基本数据类型的

事实上(函数对象,普通对象)以及(基本数据类型,引用数据类型)是在不同角度对js变量进行的定义

原型对象思考题解答

思考:原型对象prototype 属于函数对象吗?

事实上 这个问题要进行分别回答:

Function.prototype 属于函数对象,其他对象的prototype属于普通对象

function a(){};
console.log(typeof Function.prototype); // function
console.log(typeof a.prototype); //object

前面说过prototype的创造过程

    var temp = new a();
    a.prototype = temp;

这里temp当然就是普通对象啦,但是看下Function的prototype创造过程

var a = new Function();
Function.prototype = a;

看明白了把,Function的prototype为什么是函数对象了吧?回忆一下函数对象的定义吧!

指针__proto__思考题解答

思考一下,var obj={}; obj.prototype.__proto__指向谁?

这里分步思考:
1, obj只是一个普通对象
2, 什么类型的对象是有prototype属性的?当然是函数对象
3, 所以obj是没有prototype属性的
4, 所以obj.prototype===undefined
5, 所以此题的最终问题是:undefined.proto指向什么
6, 所有的对象obj都具有proto属性(null和undefined除外)!所以答案是 js报错(有没有一种被我坑了的感觉)

构造器constructor思考题解答

思考:a.prototype.__proto__.constructor指向谁?

function a(){};

这里继续分解题目:
1, a.prototype指向a的一个实例,我们已经多次强调了,而且属于普通对象
2, __proto__定义为:指向创造obj对象的函数对象的prototype属性,所以看下谁创造了a.prototype,因为a.prototype是普通对象,类型为object,那么是Object创造了它,
3, 那么显而易见a.prototype.__proto__指向了Object.prototype
4, 那么题目简化为Object.prototype.constructor指向谁
5, 继续分解题目,Object.prototype为基本对象,那么就是Object创造了它,那么它的constructor就指向了Object

Object.prototype.constructor===Object //true

不知道你晕不晕,我有点晕,这产生了蛋生鸡还是鸡生蛋的问题啦~

放心,还是有尽头的 :

Object.prototype.__proto__===null //true

这个例子告诉我们是 是null创造了一切““这不就是易经中的:道生一,一生二,二生三,三生万物!

相关文章
|
5天前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
11 0
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
29 1
|
2月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
54 0
|
2月前
|
JavaScript 前端开发 开发者
揭开JavaScript的神秘面纱:原型链背后隐藏的继承秘密
【8月更文挑战第23天】原型链是JavaScript面向对象编程的核心特性,它使对象能继承另一个对象的属性和方法。每个对象内部都有一个[[Prototype]]属性指向其原型对象,形成链式结构。访问对象属性时,若当前对象不存在该属性,则沿原型链向上查找。
27 0
|
4月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
97 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
4月前
|
JavaScript
js奥义:原型与原型链(1)
js奥义:原型与原型链(1)
|
3月前
|
JavaScript C++
js【详解】原型 vs 原型链
js【详解】原型 vs 原型链
34 0
|
4月前
|
JavaScript 前端开发
JS原型链
JS原型链
26 0
|
JavaScript
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性-2
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性-1
179 0
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性-2
|
JavaScript 前端开发 索引
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性-1
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性
168 0
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性-1