JS中原型与原型链

一. 普通对象与函数对象

JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function等 是 JS 自带的函数对象。下面举例说明。

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object
在上面的例子中 o1 o2 o3 为普通对象,f1 f2 f3 为函数对象。怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数对象(Function),其他的都是普通对象(Object)。f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object也都是通过 New Function()创建的

二. 原型对象

function Person(){}
Person.prototype.name = 'test';
Person.prototype.age  = 28;
Person.prototype.job  = 'Software Engineer';
Person.prototype.sayName = function() {alert(this.name);  
}
var person = new Person();

在 JavaScript 中,每当定义一个对象(函数也是对象)时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype属性,这个属性指向函数的原型对象。而原型对象他本身就是一个普通对象(没有通过 new Function() 创建的对象都是普通对象),即原型对象就是Person.prototype,如果你还是害怕它,那就把它想想成一个字母 A:var A = Person.prototype。这里要强调一点,只有函数对象才会拥有prototype属性,但是每个对象都拥有__proto__属性(null除外)

在上面我们给A添加了四个属性:name、age、job、sayName。其实它还有一个默认的属性:constructor。在默认情况下,所有的原型对象都会自动获得一个 constructor(构造函数)属性,这个属性(是一个指针)指向 prototype属性所在的函数(Person)。即:Person.prototype.constructor == Person。当我们创建对象var person = new Person()时,person可以继承原型对象Person.prototype的constructor属性,因此person.constructor == Person,注意person这个实例本身是没有constructor,实例的constructor是通过原型链(__proto__)获取原型对象上边的constructor。

person.constructor == Person
Person.prototype.constructor == Person

从这一角度,我们可以将Person.prototype理解为Person的一个实例。(但其实原型对象(Person.prototype)并不是构造函数(Person)的实例,而是构造函数的属性,而且是预定义添加的)。

var A = new Person();
Person.prototype = A;

但是有一个非常特别的原型对象:Function.prototype,它并不是普通对象,而是函数对象,而这个函数对象却没有prototype属性(前面所说的“每个函数对象都有一个prototype属性,这个属性指向函数的原型对象”,对Function.prototype并不适用)。

function Person(){};
console.log(typeof Person.prototype) //Object
console.log(typeof Function.prototype) // Function,这个特殊
console.log(typeof Object.prototype) // Object
console.log(typeof Function.prototype.prototype) //undefined

Function.prototype为什么是函数对象呢?

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

上文提到过凡是通过凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。因为 A 是函数对象,所以Function.prototype是函数对象。

. __proto__

JS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的构造函数的原型对象。对象 person有一个__proto__属性,创建它的构造函数是Person,构造函数的原型对象是Person.prototype ,所以:person.__proto__ == Person.prototype

Person.prototype.constructor == Person;
person.__proto__ == Person.prototype;
person.constructor == Person;

类似的,Person.__proto__ == Function.prototype;Person.prototype.__proto__ == Object.prototype;Object.__proto__ == Function.prototype; Object.prototype.__proto__ == null,按照上述理解 Object.prototype是普通对象,而普通对象的构造函数是Object,那么Object.prototype.__proto__ == Object.prototype,从而在原型链上形成死循环无法终止,因此定义Object.prototype.__proto__ == null,null是原型链的顶端。

不过,要明确的真正重要的一点就是,这个连接存在于实例(person)与构造函数(Person)的原型对象(Person.prototype)之间,而不是存在于实例(person)与构造函数(Person)之间

var animal = function(){};
var dog = function(){};animal.price = 2000;
dog.prototype = animal;
var tidy = new dog();
console.log(dog.price) //undefined
console.log(tidy.price) // 2000

实例(tidy)和 原型对象(dog.prototype)存在一个连接。这个连接存在于实例(tidy)与构造函数的原型对象(dog.prototype)之间,而不是存在于实例(tidy)与构造函数(dog)之间。

四. 函数对象

所有函数对象的__proto__都是指向Function.prototype,它是一个空函数。

Number.__proto__ === Function.prototype  // true
Number.constructor == Function //true

Boolean.__proto__ === Function.prototype // true
Boolean.constructor == Function //true

String.__proto__ === Function.prototype  // true
String.constructor == Function //true// 所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身
Object.__proto__ === Function.prototype  // true
Object.constructor == Function // true// 所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身
Function.__proto__ === Function.prototype // true
Function.constructor == Function //true

Array.__proto__ === Function.prototype   // true
Array.constructor == Function //true

RegExp.__proto__ === Function.prototype  // true
RegExp.constructor == Function //true

Error.__proto__ === Function.prototype   // true
Error.constructor == Function //true

Date.__proto__ === Function.prototype    // true
Date.constructor == Function //true

所有的构造器都来自于Function.prototype,甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法。Function.__proto__ == Function.prototype,而前面说过,Function.prototype它不是普通对象,而是函数对象,那么Function.prototype.__proto__ == ?,按照上述,Function.prototype.__proto__ == Function.prototype,但又出现了原型链上的死循环,JS一直强调万物皆对象,函数对象也是对象,给他认个祖宗,指向 Object.prototype,Object.prototype.__proto__ == null,保证原型链能够正常结束。

特别的,Math,JSON是以普通对象形式存在的。

Math.__proto__ === Object.prototype  // true
Math.construrctor == Object // true

JSON.__proto__ === Object.prototype  // true
JSON.construrctor == Object //true

四. 总结

原型和原型链是JS实现继承的一种模型。

原型链的形成是真正是靠__proto__而非prototype。

参考资料:https://www.jianshu.com/p/dee9f8b14771

转载于:https://www.cnblogs.com/RainyBear/p/8612560.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369336.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机专业学生求职信500字,计算机专业求职信500字范文

计算机专业求职信500字范文尊敬的领导:您好!请恕打扰,我是荆楚理工学院计算机工程学院的一个大学生,即将面临毕业.我很荣幸有机回向您呈上我的个人资料.在投身社会之际,为了找到符合自己专业和兴趣的工作,更好地发挥自己的才能,实…

一年中所有节日的排列顺序_计数问题(二)-排列组合的使用

在计数问题(一)中我们分析了排列和组合的定义,计算方法以及公式的含义。排列组合的基本定义讲述的是从一列元素中分先后(排列)或不分先后地选出部分元素,其可能的选择方法数。在这一期中我们会更仔细地分析组合的公式的含义&#…

使用Spring数据和Thymeleaf实现Bootstrap分页

Twitter Bootstrap具有非常好的分页UI ,在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它。 引导程序中的标准分页 受Rdio启发的简单分页,非常适合应用程序和搜索结果。 大块很难错过,易于扩展&#xff0…

一道前端学习题

对于没参加过互联网企业招聘,或是没有参加过大型互联网企业招聘的人来说,能以这些公司的面试题做为锻炼,无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答),题目本身在现实中意义不大,主要是考…

codefroces 297E Mystic Carvings

problem&#xff1a;一个圆上依次有1~2*n的数字。每个数字都有且只有另一个数字与他相连。选出三条线&#xff0c;使得每条线的两端之间隔的最少点(只包括被选择的6个点)的个数相等。输入输出格式输入格式&#xff1a;The first line contains integer n(3<n<10^5) — th…

连接计算机和网络传输介质的接口,最常用的网络传输介质和连接设备

T型连接器与BNC接插件是细同轴电缆的连接器&#xff0c;它对网络的可靠性有着重要的影响。同轴电缆与T型连接器是依赖于BNC接插件进行连接的。BNC接插件有手工安装和工具型安装之分&#xff0c;用户可根据实际情况和线路的可靠性选择。RJ&#xff0d;45非屏蔽双绞线连接器有8根…

监听网页微信扫码支付成功_网付扫码点餐新福利,消费者点餐可获微信支付金币奖励...

扫码点餐相信大家都不陌生&#xff0c;即能餐饮解决商家人力物力投入成本痛点&#xff0c;又能方便消费者点餐。现今已成为了餐饮商户的标配系统。近两年&#xff0c;很多系统厂商都在试水扫码点餐领域。尤其是聚合支付服务商&#xff0c;拥有得天独厚的优势。市面上各家扫码点…

在Play上使用twitter4j! 框架和安全社交很容易

在昨天的个人黑客马拉松期间&#xff0c;我启动了一个项目&#xff0c;我可能会在这里介绍。 但是&#xff0c;最酷的启示是&#xff08;再次&#xff09;启动和运行起来有多么容易。 创建一个新的Play项目 添加Secure Social并为Twitter配置它&#xff0c;并使用示例中的InM…

Python 冒泡排序三种写法

需求&#xff1a;输入 n 个整数并将这些数字以从大到小和从小到大的顺序输出代码如下&#xff1a;bubble_sort_v1 1 #coding:utf-82 #__author__ Diva3 4 # 升序&#xff08;从小到大&#xff09;5 SORT_TYPE_ASC 16 # 降序&#xff08;从大到小&#xff09;7 SORT_TYPE_DE…

前端程序员容易忽视的一些基础知识

基础数据结构与算法 现在有两个不同的JSON&#xff0c;比较复杂&#xff0c;可以参考这里的DEMO中返回的JSON。要比较它们的差异&#xff0c;除了用现成的工具如 beyond compare以外&#xff0c;如果我们的机器上没有安装这个工具&#xff0c;能如何较快解决&#xff1f;作为一…

ptmalloc内存分配和回收详解(文字版)

ptmalloc内存分配和回收详解&#xff08;文字版&#xff09; 进程默认内存布局&#xff08;x86&#xff09; 从进程的内存布局可知&#xff0c;.bss段之上的这块分配给用户程序的空间被称之为heap&#xff0c;start_brk指向heap的开始&#xff0c;而brk指向heap的顶部。可以使用…

html中怎么选择相同的代码,不同的HTML,相同的代码隐藏和相同的控件

创建一个Page类&#xff0c;比方说&#xff0c;TemplateViewerPageTemplateViewerPage.csusing System;using System.Web.UI;public partial class TemplateViewerPage : Page{protected override void OnLoad(EventArgs e){// load your properties_subject "test"…

linux nfs

linux&#xff08;十四&#xff09;之linux NFS服务管理学到这里差不多就结束了linux的基础学习了&#xff0c;其实linux的内容并不难&#xff0c;我们要经常的反复的去操作它&#xff0c;多多和它去联络感情才能很好的掌握这个linux。 加油&#xff01;今天是星期二。没有什么…

GlassFish 4升级的构建,Gradle和嵌入式应用服务器

最近&#xff0c;大概在去年年底&#xff0c; GlassFish开源团队发布了GlassFish 4.0 beta 72作为升级版 。 阿伦古普塔&#xff08;Arun Gupta&#xff09;在他的博客上发布了有关GlassFish 4 .0 beta 72的Maven坐标的文章。 该版本意义重大&#xff0c;因为该团队将工件发布到…

下来安成功 打开一直白屏_推广人透露:戈洛夫金2021年可能与安德拉德上演拳王统一战...

IBF中量级拳王根纳季-戈洛夫金(Gennadiy Golovkin)随着本月摧毁强制挑战者卡米尔-塞泽梅塔(Kamil Szeremeta)&#xff0c;使得下一场比赛在对手选择问题上&#xff0c;具有很大的自由度。戈洛夫金的推广人埃迪-赫恩做客Sirius XM访谈时&#xff0c;透露了一个重要消息&#xff…

WEB接口测试之Jmeter接口测试自动化 (四)

Jmeter是压力测试、接口测试工具&#xff0c;Ant是基于Java的构建工具&#xff0c;具有跨平台的作用&#xff0c;jenkins是持续集成工具。将这三者结合起来可以搭建一套webservice接口测试的持续构建环境。 1、安装JDK&#xff0c;配置java环境变量&#xff08;略过&#xff09…

面试分享:一年经验初探阿里巴巴前端社招

一般阿里社招都是招3-5年的P6 高级工程师&#xff0c;当初自己一年经验也没有想过有这个面试机会。 虽然没想着换工作&#xff0c;但是经常关注一些招聘网站的信息&#xff0c;某一天&#xff0c;在某boss上有个人找我&#xff0c;叫我发一下简历&#xff0c;我一看是阿里的某…

计算机云开头的词语,云字开头的成语

以下是小编给大家整理的云字开头的成语的内容&#xff0c;欢迎大家查看。云程发轫&#xff1a;云程&#xff1a;青云万里的路程;发轫&#xff1a;启车行进&#xff0c;比喻事业的开端。旧时祝人前程远大的颂辞。云过天空&#xff1a;比喻事情已经过去&#xff0c;一切恢复平静。…

如果此表在它的 ChildRelation 集合中不是父表,则不能将关系添加到该集合中。...

今天遇到这个问题头都大了&#xff0c;百度上也没找到解决方案&#xff0c;就自己在哪里沉思。。。。。。。。。。。。。。。。 终于皇天不负有心人&#xff0c;被我解决了&#xff01; 这是调用ChildRelations.Add&#xff08;“名字”&#xff0c;“父级”&#xff0c;”子级…

dnf机器人猜数字奖励_DNF:周年庆策划啪啪打脸,工作人员也出错误,难道又是临时工的锅?...

本来应该是很喜庆的一天&#xff0c;结果又遇见了策划啪啪打脸的事情&#xff0c;关键还连累玩家提心吊胆的。往年都是登录游戏送豪礼&#xff0c;今年策划就像搞点不一样&#xff0c;估计是认为今年送的“即时”史诗比较多吧。然后就很任性的在领取豪礼之前添加了一道“礼物申…