JS中ptototype和__proto__的关系

学到原型的时候感觉头都大了/(ㄒoㄒ)/~~ 尤其是ptototype和__proto__ 傻傻分不清  通过多番查找资料,根据自己的理解,总结如下:

一、构造函数:

构造函数:通过new关键字可以用来创建特定类型的对象的函数。比如像Object和Array,两者属于内置的原生的构造函数,在运行时会自动的出现在执行环境中,可以直接使用。如下:

var arr = new Array();//使用Array构造函数创建了一个array实例arr
arr[0]="a";
arr[1]="b";
alert(arr);//a,bvar obj=new Object();//使用Object构造函数创建了一个Object实例obj
obj.name="c";
obj.age=12;
alert(obj.name);//c

我们可以自定义的创建构造函数,并为其自定义属性和方法,如:

//创建构造函数Person
function Person(name,age){this.name=name;this.age=age;this.sayName=function(){alert(this.name)//
    };
}//使用new关键字,来生成Person实例
var person1=new Person("Tom",22);
var person2=new Person("Jerry",21);
person1.sayName();//Tom
person2.sayName();//Jerry

注意以下几点:

  • 构造函数的名字始终要以大写字母开头(主要是为了区别于非构造函数,也即是区别于普通函数)
  • 构造函数也就是函数,定义构造函数和定义普通函数的语法一样。构造函数和普通函数的区别在于:使用他们的方式不同。任何函数只要使用new操作符来调用,那他就可以作为构造函数;不使用new操作符来调用就是普通函数
function Person(name,age){this.name=name;this.age=age;this.sayName=function(){alert(this.name)//
    };
}//当做构造函数使用
var person=new Person("Tom",22);
person.sayName();//Tom    
//当做普通函数使用
Person("Jerry",30);//添加到window
sayName();//Jerry  等同于window.sayName();

二、原型对象:

每个函数都有一个prototype属性,它是一个指向原型对象的指针,原型对象在定义函数时同时被创建,原型对象的用途是包含所有实例共享的属性和方法

function Person(){
}
//自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){alert(this.name);
};
//原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();//Tom
person2.sayName();//Tom

只要创建了一个新函数,每个函数在创建之后都会获得一个prototype的属性,这个属性指向函数的原型对象(原型对象在定义函数时同时被创建),此原型对象又有一个名为“constructor”的属性,反过来指向函数本身,达到一种循环指向,

如在上边的例子中:alert(Person.prototype.constructor===Person);//会返回true

function Person(){}
alert(Person.prototype.constructor===Person);//true

三、__proto__(注意这里proto左右两边都有两个"_")

当调用构造函数创建一个新实例后,该实例的内部将包含一个指针[[Prototype]],该指针指向创建它的构造函数的原型,在脚本上没有标准的方法来访问[[Prototype]],但大多数浏览器都支持通过__proto__来访问。

function Person(){
}
//自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){alert(this.name);
};
//原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();//Tom
person2.sayName();//Tom
alert(person1.__proto__===Person.prototype);//true

以上述的示例代码为例,各个对象之间的关系如下图所示:

 

总结:

①只要创建了一个函数,该函数的原型对象也随之同时被创建出来,原型对象中的属性和方法被经由其相对应的构造函数所创建的实例所共享

②每个函数在创建之后都会获得一个prototype的属性,这个属性指向该函数的原型对象

③每个实例对象的__proto__属性都指向其构造函数的原型

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

函数与匿名函数

函数与匿名函数一、函数 在计算机科学中,函数是程序负责完成某项特定任务的代码单元,具有一定的独立性。 1.函数的定义 在Python中,函数在定义时需要满足这样的规则: 使用关键字def引导;def后面是函数的名称&#xff0…

[最短路]飞行

题目描述 WFYZ的校园很大,这里生活着很多生物,比如住在钟楼上的的鸽子,其中鸽子冉冉和她的妹妹凝凝白天在不同的地方吃虫,而在晚上她们都回到钟楼休息。她俩是两只懒鸟,于是提出了一个计划,尽量减少她们在飞…

Java状态和策略设计模式之间的差异

为了在Core Java应用程序中正确使用状态和策略设计模式,对于Java开发人员清楚地了解它们之间的区别很重要。 尽管状态和策略设计模式的结构相似,并且都基于开放式封闭设计原则,从SOLID设计原则表示为“ O”,但它们在意图上完全不同…

【原创】系统分析师--任重而道远

今天查到了系统分析师的成绩。有坏消息,也有好消息。 坏消息当然就是意料之中的没过了,好消息是我基本上没有花什么时间去准备,但是结果却比想象中的要好。 案例分析这一场过了。基础知识差几分,论文只是及格分的一半&#xf…

XML文档的简易增删查改

dom4j解析一、利用dom4j操作元素节点 1.查询第一本书的书名,并输出到控制台 2.给第一本书添加一个特价节点, 并修改第一本书的售价节点的内容为19.8元 3.删除第二本书的作者节点二、利用dom4j操作属性节点 1.给第一本书添加一个属性,如:出版社…

廖雪峰Java3异常处理-1错误处理-2捕获异常

1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常可能发生异常的语句放在try{...}中使用catch捕获对应的Exception及其子类1.2 捕获多个异常 try{...} catch() {...} catch(){...}finally{..} 使用多个catch子句&…

更新数据库

方法一:在对SQL数据库进行更新时,用CommandBuilder对像来自动构建sql命令,来起到更新的作用;这种方法用起来比较方便,具体代码如下: 以下代码都在xp系统下测试通过 环境:vs.net2005 \ sql server 2000\xpus…

在崩溃或断电后测试Lucene的索引耐久性

Lucene有用的事务功能之一是索引持久性 ,它可以确保一旦成功调用IndexWriter.commit ,即使操作系统或JVM崩溃或断电,或者您杀死-KILL JVM进程,重启后索引也将保持完整(未损坏),并将反映崩溃前的…

Bash 脚本 set 命令教程

http://www.ruanyifeng.com/blog/2017/11/bash-set.html set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题。本文介绍它的基本用法,让你可以更安心地使用 Bash 脚本。 一、简介 我们知道,Bash 执行脚…

Jmeter、postman、python 三大主流技术如何操作数据库?

1、前言 只要是做测试工作的,必然会接触到数据库,数据库在工作中的主要应用场景包括但不限于以下: 功能测试中,涉及数据展示功能,需查库校验数据正确及完整性;例如商品搜索功能 自动化测试或性能测试中&a…

[转][HTML]css属性

1、字体属性(type)font-family(使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant(字体大小写):normal/small-capsfont-weight(字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小)&…

7-OKHttp使用详解,步骤挺详细的,适合初学者使用!

OKHttp使用详解,步骤挺详细的,适合初学者使用! 一,OKHttp介绍 okhttp是一个第三方类库,用于android中请求网络。 这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso和Leak…

变量与递归函数

变量与递归函数一、变量 变量分为全局变量和局部变量。 python中全局变量和局部变量的最大区别在于局部变量只能通过函数去访问,而全局变量可以直接访问。 举个例子: name linxu #全局变量 def change_name():namepython #局部变量print(name) …

使用MOXy 2.5.1快速且有点脏的JSON模式生成

因此,这些天我正在为即将推出的Oracle云服务开发新的REST API,因此我需要做的一件事情就是能够为模型中的bean自动生成JSON模式。 我正在使用MOXy从POJO生成JSON,从EclipseLink 2.5.1版本开始,它现在具有从bean模型生成JSON模式的…

手机端input[type=date]的placeholder不起作用

<div class"input clearfix"><label class"fl">起始日期</label><input class"fl text_date" type"date" name"" value"" placeholder"年/月/日" /></div><div cla…

Python中的TCP编程,实现客户端与服务器的聊天(socket)

参考大神blog:自己再写一个 https://blog.csdn.net/qq_31187881/article/details/79067644转载于:https://www.cnblogs.com/studybrother/p/10306903.html

利用ASP.NET向服务器上传文件[转]

文件上传技术是一个很实用的技术&#xff0c;有着很广泛的应用&#xff0c;在ASP.NET自身的前一个版本ASP里实现这个功能&#xff0c;就必须使用第三方的组件或者自己开发组件了&#xff0c;现在&#xff0c;用ASP.NET实现起来就简单得多了&#xff0c;我们不需要使用任何组件就…

JavaSE:如何设置/获取您自己的文件和目录属性

在上一篇文章“确定特定文件系统支持的视图”中 &#xff0c;了解如何询问文件系统存储&#xff0c;并了解特定文件属性视图的可支持性。 简而言之&#xff0c;我们将探索最高级和重要的文件属性视图之一&#xff0c;即用户定义的文件属性视图 。 特别是&#xff0c;在系统之…

java中HashMap详解

HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员&#xff0c;其中 HashMap 是 Map 接口的常用实现类&#xff0c;HashSet 是 Set 接口的常用实现类。虽然 HashMap 和 HashSet 实现的接口规范不同&#xff0c;但它们底层的 Hash 存储机制完全一样&#xff0c;甚…

java代码编写的文本特征提取_Test1 java语言写的特征提取源代码,有搞文字识别的可以下载一看,简单易学 Develop 274万源代码下载- www.pudn.com...

文件名称: Test1下载 收藏√ [5 4 3 2 1 ]开发工具: Java文件大小: 35 KB上传时间: 2015-03-02下载次数: 46提 供 者: 常杰详细说明&#xff1a;java语言写的特征提取源代码&#xff0c;有搞文字识别的可以下载一看&#xff0c;简单易学-Feature extraction of the Java …