最近在学习javaScript,学习到js面向对象中的原型时,感悟颇多。若有不对的地方,希望可以指正。

  js作为一门面向对象的语言,自然也拥有了继承这一概念,但js中没有类的概念,也就没有了类似于java中的extends,所以,我觉得js中的继承主要依赖于js中的原型(链)。

  那么,原型是什么呢?我们知道js中函数亦是一种对象,当我们创建一个函数时,其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性,他是一个指针,指向了这个函数的原型对象,这个原型对象有一个默认的属性叫做constructor,这个属型指向了拥有protptype属型的函数。

  1. function Person(){}
  2. Person.prototype={
         // constructor:Person;
  3. first_name:"guo",
  4. hair_color:"black",
  5. city:"zhengzhou",
  6. act:function(){alert("eatting");}
  7. };

  以这个为例,我们先创建了一个函数Person,这个函数默认的有一个属性prototype,指向Person.propttype这个对象,这个对象有一个默认的属性constructor(),Person.prototype.constructor--->Person.(其实此处默认的是指向Object,后面会做指正)

  当我们通过构造函数创建了实例后会怎么样呢?

  1. function Person(){}
  2. Person.prototype={
  3. first_name:"guo",
  4. hair_color:"black",
  5. city:"zhengzhou",
  6. act:function(){alert("eatting");}
  7. };
  8. var boy=new Person();
  9. var girl=new Person();

  在这时,我们要知道,js中的构造函数与函数的区别便是这个new关键字,使用new操作符的函数便是一个构造函数。当我们创建了Person的实例对象把它保存在boy,girl时,这两个实例对象会生成一个默认的属性叫做_proto_(在ECMAScript5中可用[[prototype]]表示),这个属型指向了构造函数的原型对象,也就是boy._proto_--->Person.prototype(与构造函数毫无关系)。此时,boy或者girl可以通过点来调用原型对象中的属型,此时要知道,boy,girl共享了原型对象的属型。我们可以通过isProtptypeOf()或者object.getPrototypeOf()(这个函数的返回值为原型对象,也就是_proto_的值)来验证上述结论。

  1. alert(Person.prototype.isPrototypeOf(boy)); //true
  2. alert(Object.getPrototypeOf(boy).first_name); //"guo"

  此时,我们可以再做进一步验证,若在实例中创建了一个与原型对象属性重名的属性会怎么样呢?

  1. var boy=new Person();
  2. var girl=new Person();
  3. boy.hair_color="red";
  4. alert(boy.hair_color); //red
  5. alert(girl.hair_color); //black
  6. alert(Object.getPrototypeOf(boy).hair_color); //black

  由此可见,实例中声明的重名属性会屏蔽的原型对象中的属性,但也仅仅时覆盖,不会对原型对象的属型造成影响(Object.getPrototypeOf(boy).hair_color==black),也不会对其他共享原型对象属型的实例对象产生影响(girl.hair_color==black)。与此同时,可以使用delete操作符删除实例对象声明的属性来撤销掉屏蔽效果。我们可以使用hasOwnProperty()来验证一个属型是存在于实例的(true),还是存在于原型对象的(false)。

  1. alert(boy.hasOwnProperty("hair_color")); //true

  可以使用Object.keys()来枚举属性。

  1. var key=Object.keys(Person.prototype);
  2. alert(key);

  学习了这些,我们会发现,使用上面的写法来声明原型对象会出现一个问题,constructor不再指向Person了,这与我们说的原型对象的constructor属性默认指向含有prototype属性的函数背道而驰,这是因为:每创建一个函数会自动创建一个prototype对象,这个对象会默认创建constructor。所以,此处我们的本质是对默认的prototype进行了重写,因此新的consrtuctor也变成了指向Object函数,不再指向Person函数。若constructor真的很重要,那么需要写上constructor:Person.

  之后,我们需要知道原型的动态性,改变原型对象中的属性会反应到实例中,不管实例的创建在原型对象的属型改变前面或者后面

  1. function Person(){}
  2. Person.prototype={
  3. first_name:"guo",
  4. hair_color:"black",
  5. city:"zhengzhou",
  6. act:function(){alert("eatting");}
  7. };
  8.  
  9. var boy=new Person();
  10. Person.prototype.hobby="basketball";
  11. var girl=new Person();
  12. alert(boy.hobby); //basketball

  上面这段代码可见,即使对原型对象属性的修改发生在实例创建的后面,boy实例亦然共享了Person.prototype.hobby.

  但是,这种情况仅仅发生在原型对象属型的修改,当对原型对象属性进行完全重写时,实例的创建必须放在原型对象属性重写的后面,否则会出错。

  1. function Person(){}
  2. var girl=new Person();
  3. Person.prototype={
  4. first_name:"guo",
  5. hair_color:"black",
  6. city:"zhengzhou",
  7. act:function(){alert("eatting");}
  8. };
  9.  
  10. var boy=new Person();
  11. Person.prototype.hobby="basketball";
  12.  
  13. alert(boy.hobby); //basketball
  14. alert(girl.first_name); //undefined

  再回到“屏蔽”这一问题上,我们前面了解到了创建实例对象的属性(与原型对象中的某一属性重名)会屏蔽掉原型对象的该属性,但不影响其他实例对象。这里有一个错误,这个情况只适用于基本数据类型,当属性的值引用类型时,会出现一个大问题,看如下代码。

  1. function Person(){}
  2.  
  3. Person.prototype={
  4. first_name:"guo",
  5. hair_color:"black",
  6. friends:["Nick","John"],
  7. city:"zhengzhou",
  8. act:function(){alert("eatting");}
  9. };
  10.  
  11. var boy=new Person();
  12. boy.friends.push("Mike");
  13. var girl=new Person();
  14. alert(boy.friends); //Nick,John,Mike
  15. alert(girl.friends); //Nick,John,MIke

  可见,上面这句话不适用了,原因是friends是存在于原型对象中的,而不是boy中,所以他的修改会影响到这个环境。(我们可以通过boy.frindes=[]来创建一个boy实例的属性)那么,我们就需要引入组合使用构造函数模式与原型模式。

 

  1. function Person(hair_color,city){
  2.  
  3. this.hair_color=hair_color;
  4. this.city=city;
  5. this.friends=["John","Nick"];
  6. }
  7. Person.prototype={
  8. constructor:Person,
  9. first_name:"guo",
  10. act:function() {
  11.  
  12. alert("eatting");
  13. }
  14. };
  15. var boy=new Person("black","zhengzhou");
  16. var girl=new Person("red","shenyang");
  17. boy.friends.push("Nick");
  18. alert(girl.friends);
  19. alert(boy.friends);

  该模式是目前ECMAScript中使用最广泛,认同最高的创建自定义类型的方法,甚至可以作为一种默认模式。

  但是对于从事其他面向对象语言的程序员来说,这样的模式显得很怪异,为了将所有的信息都封装到构造函数中,动态原型模式出现了。动态模式主要是通过一个if语句来判断是否需要对原型对象进行初始化,以达到节省资源的目的。

  此外还有稳妥构造模式,是为了适应没有共享属性和不使用this的情况。

    

 

javaScript中的原型的更多相关文章

  1. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  2. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  3. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  4. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  5. 前端知识体系:JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则

    理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...

  6. JavaScript中的原型、原型链、原型模式

    今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...

  7. 深入了解JavaScript中基于原型(prototype)的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  8. javascript中的原型和继承

    javascript一直是初学者口中的难点,甚至一些有些许工作经验的人也不太明白其中的原理,而我就是那个初学者,前段时间在阮一峰老师的博客上看了一篇文章<javascript继承机制的设计思想& ...

  9. JavaScript中的原型和对象机制

    1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...

  10. 理解javascript中的原型模式

    一.为什么要用原型模式. 早期采用工厂模式或构造函数模式的缺点:  1.工厂模式:函数creatPerson根据接受的参数来构建一个包含所有必要信息的person对象,这个函数可以被无数次的调用,工厂 ...

随机推荐

  1. elasticsearch配置文件解析

    配置es的集群名称 : cluster.name:  fcz_es

  2. ERROR (ClientException)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABPwAAABCCAIAAABM0F+3AAAgAElEQVR4nO2d+29d13Xn7y+xyMvLty

  3. 现代程序设计 homework-09

    现代程序设计 homework-09 这次作业是要求将homework-02做成一个可演示的应用,目的是为了让用户看到程序的计算步骤以及中间结果. 借此机会也学了一下JavaScript,感觉总结的地 ...

  4. labview 中activex的初步使用方法

    1.在前面板放置一个activex容器 2.插入activex控件 3.百度找到这个activex控件的属性和方法介绍 4.程序框图中右键activex控件,创建xxx类的方法或者xxx的属性:act ...

  5. Linux 性能监控的18个命令行工具

    对于系统和网络管理员来说每天监控和调试Linux系统的性能问题是一项繁重的工作.在IT领域作为一名Linux系统的管理员工作5年后,我逐渐 认识到监控和保持系统启动并运行是多么的不容易.基于此原因,我 ...

  6. WS103C8例程——串口2【worldsing笔记】

    在超MINI核心板 stm32F103C8最小系统板上调试Usart2功能:用Jlink 6Pin接口连接WStm32f103c8的Uart2,PC机向mcu发送数据,mcu收到数据后数据加1,回传给 ...

  7. linux(centos 6)下记录所有用户的操作以及ip、时间

    编辑/etc/profile文件,在文件末尾加入下面代码: [root@iZ23nn1p4mjZ root]# vi /etc/profile history USER=`whoami` USER_I ...

  8. NGUI学习笔记(五):缓动

    在Unity3D中可以使用自带的Animation制作任意形式的动画,不过我们这篇笔记主要是学习和使用NGUI提供的Tween动画.NGUI提供的Tween库功能较为简单,主要是用来实现NGUI自身需 ...

  9. Python beautifulsoup模块

    BeautifulSoup中文文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ BeautifulSoup下载:http://w ...

  10. [置顶] iOS开发规范

    iOS代码编程规范 详细讲解代码该如何写,怎样写,如何规范. 什么样的代码是最美的,本文档会给你讲解 iOS代码编程规范........................................ ...