Javascript中prototype属性
prototype作为JS相对比较难理解的一个知识点,在这里发表下自己的理解。
本文将包含以下几部分内容:
1、js prototype的简单介绍,
2、js构造函数的介绍,
3、prototype的深入理解,
4、constructor。
一、在其他的面向对象语音中,比如Java,存在类(class)的概念,对象就是类的实例。但是再js当中呢,是没有类的概念的,平常时说的加一个class类是指在样式css中加一个类class。js中一切皆对象,所有的东西都是对象(除了null和undefined),js中所有的东西都是由object衍生而来的,原型链终点指向Object.prototype。
二、js构造函数
在介绍prototype之前先来对JS的构造函数做个简单的介绍。如果熟悉Java的同学应该了解Java的构造函数默认存在类中,也可以自定义类的构造函数,通过构造函数去new 一个对象。那么在JavaScript中什么是构造函数呢,所谓的构造函数,简单来说就是提供了一个生成对象的模板并描述对象的基本结构的函数,对象就是构造函数的实例。
构造函数有一下特点:
1.首字母大写,
2.使用new 来调用构造函数返回实例对象,
3.构造函数中使用this指向生成的对象实例。
下边提供一个简单的例子:
function Person(name){
this.name=name;
}
var lucy=new Person('lucy');
console.log(lucy.name);
这里将输出lucy。
这例子就是使用Person构造函数使用new关键字生产person的实例对象lucy。
但是构造函数也存在缺点,就是当构造函数存在一个方法A的时候,当创建对象的时候会在每个实例都生成一个A方法,对象与对象之间的A方法是不一样的,无法实现共享,所以就导致资源的浪费。一下例子说明:
function Person(name){
this.name=name;
this.say=function(){
alert("say something !")
}
}
var lucy=new Person('lucy');
var tom =new Person('tom');
console.log(lucy.name); //'lucy'
console.log(tom.name); //'tom'
console.log(lucy.say===tom.say); //false
以上例子就说明同一个构造函数的对象实例之间无法共享属性或方法。
三、关于prototype
上边说的构造函数无法共享的缺点用prototype将得到很好的解决。
js prototype的定义:prototype 属性使您有能力向对象添加属性和方法。
用法:object.prototype.name=value。用法实例:
function Person(name){
this.name=name;
this.say=function(){
alert("say something !")
}
}
Person.prototype.eat=function(){
return "eatting";
}
var lucy=new Person('lucy');
var tom =new Person('tom');
console.log(tom.eat()); //eatting
console.log(lucy.eat()===tom.eat()); //true
上边的代码中,证明两个实例都沿用了同一个prototypesh原型链 中的eat方法,当修改原型对象的eat方法时,两个实例都发生改变,这是因为对象实例本身没有eat方法,都是读取的原型对象中的方法。所以,当实例对象本身没有这个方法时,会往他的原型对象中找,如果原型对象中没有再往上一级找,直到最顶层。如果实例中有跟原型对象中一样的方法就不会再往上找了。
所以:
原型对象的作用,就是定义所有对象实例所共享的属性和方法。
每一个构造函数都存在一个prototype属性,对于对象实例来说,prototype是对象实例的原型对象。所以prototype即是属性,又是对象。
原型链:对象的属性和方法,有可能是定义在自身,也有可能是定义在它的原型对象。由于原型对象本身对于对象实例来说也是对象,它也有自己的原型,所以形成了一条原型链(prototype chain)。比如,a对象是b对象的原型,b对象是c对象的原型,以此类推。所有一切的对象的原型顶端,都是Object.prototype,即Object构造函数的prototype属性指向的那个对象。
当实例对象读取某个属性时,先看自身有没有这个属性,如果有就不再往上找,如果没有就往他的原型对象找,如果没有就再往上一层原型对象找,知道找到,否则undefined,当实例中存在同名属性时就会优先读取自身的属性,相当于“覆盖”。
平常时我们用的数组的属性或者方法就是用原型对象上的属性或者方法,比如
var arr = [1,2,3]; console.log(arr.length);//用的是Array.prototype里边的length属性
四、constructor
prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。
function Abc(){
console.log(111)
}
console.log(abc.prototype.constructor===Abc) //true
下边用一张图解释下这几着之间的关系:

每一个构造函数都存在一个prototype属性,而构造函数生产的实例对象中通过原型链指向了原型对象,原型对象中有一个construtor属性指向了构造函数。
Javascript中prototype属性的更多相关文章
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- Javascript中prototype属性详解
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- Javascript中prototype属性的详解
原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...
- 详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 详解Javascript中prototype属性
转自:https://www.jb51.net/article/91826.htm 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Jav ...
- 在 JavaScript 中 prototype 和 __proto__ 有什么区别
本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- Javascript中length属性的总结
Javascript中length属性的总结 一.StringObject中的length length属性是返回字符串的字符数目. 例如: // 普通字符串 var str = " ...
随机推荐
- EasyUI Tree 树 ——实现多级别菜单的展示,以及与后台数据的交互
一 要引入的js css库 <link type="text/css" href="css/base.css" rel="stylesheet& ...
- Python格式化字符串--format
format格式化字符串方法相较于老版%格式方法的优点: 1.不需要理会数据类型的问题,在%方法中'%s'只能替代字符串类型. 2.单个参数可以多次输出,参数顺序可以不相同. 3.填充方式十分灵活,对 ...
- Java集合源码分析(二)Linkedlist
前言 前面一篇我们分析了ArrayList的源码,这一篇分享的是LinkedList.我们都知道它的底层是由链表实现的,所以我们要明白什么是链表? 一.LinkedList简介 1.1.LinkedL ...
- win10应用 UWP 使用MD5算法
windows有自带的算法来计算MD5 原本在WPF是 private string get_MD5(string str) { System.Security.Cryptography.MD5Cry ...
- Uva11582
最近各种破事忙死了 终于开始做题了 紫薯第10章第一题,come on 设g(i)=f(i) mod n,当二元组(g(i).g(i+1))出现重复时,整个序列就开始重复(这一话怎么也不懂,请大神解释 ...
- UVa 10954,Add All
Huffman编码简化版,优先队列搞定. 1A 调试的时候发现一个问题..木有想明白...问题代码里给出,哪位大神给解释下. #include <iostream> #include &l ...
- 怎用不用工具创建一个javaWeb项目
整体步骤是: 1: 新建一个文件夹: 以项目名称命名 2:在新建的文件夹下再新建一个文件夹 WEB-INF (注意:大小写) 和 一个文件 index.jsp : index.jsp里面的代码: ...
- 数据抓取分析(python + mongodb)
分享点干货!!! Python数据抓取分析 编程模块:requests,lxml,pymongo,time,BeautifulSoup 首先获取所有产品的分类网址: def step(): try: ...
- Oracle参数设置之set与reset的实际案例
Oracle参数设置之set与reset的实际案例 环境:Oracle 10.2.0.5 RAC 需求:节点1的aq_tm_processes要求恢复默认,节点2设置要求保持不变 1.构建测试环境 2 ...
- 测试服务搭建之centos7下安装java
一 安装Java 1 创建普通用户 useradd wujian passwd wujian 提示输入密码:[输入wujian的密码] user:wujian group:root passwd:12 ...