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属性的更多相关文章

  1. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  2. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  3. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  4. Javascript中prototype属性的详解

    原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...

  5. 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  6. 详解Javascript中prototype属性

    转自:https://www.jb51.net/article/91826.htm 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Jav ...

  7. 在 JavaScript 中 prototype 和 __proto__ 有什么区别

    本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...

  8. 深入理解JavaScript中的属性和特性

    深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...

  9. Javascript中length属性的总结

    Javascript中length属性的总结 一.StringObject中的length     length属性是返回字符串的字符数目. 例如: // 普通字符串 var str = " ...

随机推荐

  1. 前端要革命?看我在js里写SQL

    在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在js里写SQL? ...

  2. python爬虫之获取验证码登陆

    #--coding:utf-8#author:wuhao##这里我演示的就是本人所在学校的教务系统#import urllib.requestimport urllib.parseimport rei ...

  3. 九大排序算法Demo

    1. 冒泡排序 冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换, ...

  4. Android Annotations(1)

    特性:   Android Annotations是一个开源的框架,用于加速 Android应用的开发,可以让你把重点放在功能的实现上,简化了代码,提升了可维护性. 特性: 依赖注入: inject ...

  5. python之集合

    集合(set),它是一个无序的,不重复的数据组合,它是作用如下: 1.去重,也就是去除重复的内容.有一点值得注意的是:将一个列表(list)变成集合的时候,会自动去重. 2.关系测试.测试数据之间的交 ...

  6. C# TextBlock 上标

    我需要做一个函数,显示 ,但是看起来用 TextBlock 做的不好看. 我用 WPF 写的上标看起来不好看,但是最后有了一个简单方法让他好看. 本文告诉大家如何做一个好看的上标. 一开始做的方法: ...

  7. Tomcat 笔记-配置虚拟目录

    ,默认情况下,只有webapps下的目录才能被Tomcat自动管理成一个web站点,把web站点的目录分散到其他磁盘管理就需要配置虚拟目录.把web应用所在目录交给web服务器管理,这个过程称之为虚拟 ...

  8. 【ASP.NET MVC 学习笔记】- 01 理解MVC模式

    本文参考:http://www.cnblogs.com/willick/p/3195560.html 1.MVC模式是软件系统的一种架构模式,它将软件分为三大模块: 模型(Model):封装业务逻辑以 ...

  9. iPhone X 适配解决方案

    在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 这将导致一个页面允分利用iPhon ...

  10. nodejs运行前端项目

    有时候我们会创建一些小项目,只有几个简单html,没有引入一些前端框架,也没有使用webpack,那我们要如何让代码在我们本地跑起来呢? 当然是有很多种方法,IIS.wampserver等等好多都可以 ...