摘的一段关于原型的介绍

在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例。但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于‘类的‘,而是通过构造函数(constructor)和原型链(prototype chains)实现的。但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让原型对象的写法更加清晰、更像面向对象编程的语法而已。

1.构造函数的简单介绍

  在我的一篇Javascript 中构造函数与new命令的密切关系文章中,详细了介绍了构造函数的概念和特点,new命令的原理和用法等,如果对于构造函数不熟悉的同学,可以前往细细品味。以下做一个简单的回顾。

  所谓构造函数,就是提供了一个生成对象的模板并描述对象的基本结构的函数。一个构造函数,可以生成多个对象,每个对象都有相同的结构。总的来说,构造函数就是对象的模板,对象就是构造函数的实例。

  构造函数的特点有:

    a:构造函数的函数名首字母必须大写。

    b:内部使用this对象,来指向将要生成的对象实例。

    c:使用new操作符来调用构造函数,并返回对象实例。

  看一个最简单的一个例子。


1

2

3

4

5


function Person(){

 this.name = ‘keith‘;

}

 var boy = new Person();

console.log(boy.name); //‘keith‘

2.构造函数的缺点

  所有的实例对象都可以继承构造函数中的属性和方法。但是,同一个对象实例之间,无法共享属性。


1

2

3

4

5

6

7

8

9

10

11

12


function Person(name,height){

 this.name=name;

 this.height=height;

 this.hobby=function(){

 return ‘watching movies‘;

}

 }

var boy=new Person(‘keith‘,180);

 var girl=new Person(‘rascal‘,153);

 console.log(boy.name); //‘keith‘

 console.log(girl.name); //‘rascal‘

 console.log(boy.hobby===girl.hobby); //false

 上面代码中,一个构造函数Person生成了两个对象实例boy和girl,并且有两个属性和一个方法。但是,它们的hobby方法是不一样的。也就是说,每当你使用new来调用构造函数放回一个对象实例的时候,都会创建一个hobby方法。这既没有必要,又浪费资源,因为所有hobby方法都是童颜的行为,完全可以被两个对象实例共享。

  所以,构造函数的缺点就是:同一个构造函数的对象实例之间无法共享属性或方法。

3.prototype属性的作用

  为了解决构造函数的对象实例之间无法共享属性的缺点,js提供了prototype属性。

  js中每个数据类型都是对象(除了null和undefined),而每个对象都继承自另外一个对象,后者称为“原型”(prototype)对象,只有null除外,它没有自己的原型对象。

  原型对象上的所有属性和方法,都会被对象实例所共享。

  通过构造函数生成对象实例时,会将对象实例的原型指向构造函数的prototype属性。每一个构造函数都有一个prototype属性,这个属性就是对象实例的原型对象。


1

2

3

4

5

6

7

8

9

10

11

12


function Person(name,height){

this.name=name;

this.height=height;

}

Person.prototype.hobby=function(){

return ‘watching movies‘;

}

var boy=new Person(‘keith‘,180);

var girl=new Person(‘rascal‘,153);

console.log(boy.name); //‘keith‘

console.log(girl.name); //‘rascal‘

console.log(boy.hobby===girl.hobby); //true

  上面代码中,如果将hobby方法放在原型对象上,那么两个实例对象都共享着同一个方法。我希望大家都能理解的是,对于构造函数来说,prototype是作为构造函数的属性;对于对象实例来说,prototype是对象实例的原型对象。所以prototype即是属性,又是对象。

  原型对象的属性不是对象实例的属性。对象实例的属性是继承自构造函数定义的属性,因为构造函数内部有一个this关键字来指向将要生成的对象实例。对象实例的属性,其实就是构造函数内部定义的属性。只要修改原型对象上的属性和方法,变动就会立刻体现在所有对象实例上。


1

2

3

4

5

6


Person.prototype.hobby=function(){

 return ‘swimming‘;

 }

 console.log(boy.hobby===girl.hobby); //true

 console.log(boy.hobby()); //‘swimming‘

console.log(girl.hobby()); //‘swimming‘

  上面代码中,当修改了原型对象的hobby方法之后,两个对象实例都发生了变化。这是因为对象实例其实是没有hobby方法,都是读取原型对象的hobby方法。也就是说,当某个对象实例没有该属性和方法时,就会到原型对象上去查找。如果实例对象自身有某个属性或方法,就不会去原型对象上查找。


1

2

3

4

5


boy.hobby=function(){

 return ‘play basketball‘;

 }

 console.log(boy.hobby()); //‘play basketball‘

 console.log(girl.hobby()); //‘swimming‘

  上面代码中,boy对象实例的hobby方法修改时,就不会在继承原型对象上的hobby方法了。不过girl仍然会继承原型对象的方法。

  总结一下:

a:原型对象的作用,就是定义所有对象实例所共享的属性和方法。

b:prototype,对于构造函数来说,它是一个属性;对于对象实例来说,它是一个原型对象。

时间: 2024-10-12 17:05:03

摘的一段关于原型的介绍的相关文章

MockPlus原型设计介绍

MockPlus原型设计介绍 在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务.因为之前的课程学习需要,我们已经大概掌握了原型设计软件Axure的使用,因此在这里,我选择了另一原型设计进行介绍,与Axure有很高相似度的原型设计软件:Mockplus. 引言: Mockplus(摹客)是一款简洁快速的原型图设计工具.适合软件团队.个人在软件开发的设计阶段使用.其低保真.无需学习.快速上手.功能够用.并能够很好地表达自己的设计. 了解一点Axure

Axure原型设计介绍

在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务.因为之前的课程学习需要,我们大概掌握了原型设计软件Axure的使用,下面是一些我们学习过程中的介绍   Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档.作为专业的原型设计工具,它能快速.高效的创建原型,同时支持多人协作设计和

JavaScript之面向对象学习五(JS原生引用类型Array、Object、String等等)的原型对象介绍

1.原型模式的重要性不仅仅体现在创建自定义类型方面,就连所有的原生的引用类型(Obejct.Array.String等等)都在构造函数的原型上定义方法和属性.如下代码可以证明: alert(typeof Array.prototype.sort); //输出:function alert(typeof String.prototype.substring); //输出:function 通过原生对象的原型,不仅可以取得所有默认方法的引用,而且可以定义新的方法.可以想修改自己定义对象的原型一样修改

一个程序员如何用代码来一段优雅的自我介绍

Person person = new Person(); person.Name = "铁柱"; person.WeChat = "15144388228";//this is real person.HeaderPhoto="戴眼镜.黑眼圈.格子衫.牛仔裤.双肩包"; DateFormat date = new SimpleDateFormat("yyyy-MM-dd"); person.Birthday = date.p

彻底理解JavaScript原型

原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"[[prototype]]"属性,函数对象有"prototype"属性,原型对象有"constructor"属性. 为了弄清原型,以及原型相关的这些属性关系,就有了这篇文章. 相信通过这篇文章一定能够清楚的认识到原型,现在就开始原型之旅吧. 认识原型 开始原型的介绍之前,首先来认识一下什么是原型? 在JavaScript中,原型也是一个对象,通过原型可以实现对象的属

浅谈JavaScript之原型

上一篇谈new关键字也是给这一篇写关于原型的文章买个伏笔,我对原型的理解可能会有偏差,如有错误,望指正一定修改,望各位道友如果想真正的理解原型的概念一定要再看完各方言论再回归教材. 言归正传谈原型,首先原型是一个对象,无论什么时候,只要创建了一个函数,就会按照规则创建一个Prototype属性,这个属性指向函数的原型对象,在默认情况下,所有的原型对象都会有一个constructor属性,这个属性又指向函数的原型对象.先来段代码 function Person(){} Person.prototy

用gdb调试程序笔记: 以段错误(Segmental fault)为例

用gdb调试程序笔记: 以段错误(Segmental fault)为例[转] 1.背景介绍2.程序中常见的bug分类3.程序调试器(如gdb)有什么用4.段错误(Segmental fault)介绍5.gdb调试入门 一.背景介绍这个笔记主要介绍开源的程序调试器(gdb)的入门知识,目的是使unix/linux环境的编程新手能够快速学会使用gdb调试程序的方法,同时也是对我使用gdb的一个经验总结.本文假设你能使用简单的unix/linux命令并能用gcc(GNU C Compiler, GNU

深入JavaScript对象(Object)与类(class),详细了解类、原型

JavaScript基于原型的对象机制 JavaScript原型上的哪些事 一.JavaScript基于原型的对象机制 JavaScript对象是基于原型的面向对象机制.在一定程度上js基于原型的对象机制依然维持了类的基本特征:抽象.封装.继承.多态.面向类的设计模式:实例化.继承.多态,这些无法直接对应到JavaScript的对象机制.与强类型语言的类相对应的是JavaScript的原型,所以,只能是基于原型来模拟实现类的设计模式. 为了便于理解,这里采用了Function构造函数及对象原型链

java设计模式 GOF23 04 原型模式

一.原型模式介绍 因为java中new一个新对象比clone一个对象需要花费等多的资源,所以一般需要 在短时间内创建大量对象并且new对象的过程需要耗费比较多的资源使用原型模式. 想要clone一个类需要这个类实现Cloneable接口,重载clone方法,这个接口在底层 通过内存拷贝实现clone对象,因此效率很高. package com.lz.prototype; import java.util.Date; public class ShallowClone implements Clo