javaScript中的原型解析【推荐】


Posted in Javascript onMay 05, 2016

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

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

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

function Person(){}
    Person.prototype={

 // constructor:Person;
      first_name:"guo",
      hair_color:"black",
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

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

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

function Person(){} 
  Person.prototype={ 
    first_name:"guo", 
    hair_color:"black", 
    city:"zhengzhou", 
    act:function(){alert("eatting");} 
  }; 
  var boy=new Person(); 
  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_的值)来验证上述结论。

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

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

var boy=new Person(); 
var girl=new Person(); 
boy.hair_color="red";  
alert(boy.hair_color);  //red 
alert(girl.hair_color); //black 
alert(Object.getPrototypeOf(boy).hair_color);  //black

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

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

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

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

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

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

function Person(){} 
Person.prototype={ 
  first_name:"guo", 
  hair_color:"black", 
  city:"zhengzhou", 
  act:function(){alert("eatting");} 
}; 
 
var boy=new Person(); 
Person.prototype.hobby="basketball"; 
var girl=new Person(); 
alert(boy.hobby); //basketball

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

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

function Person(){} 
    var girl=new Person(); 
    Person.prototype={ 
      first_name:"guo", 
      hair_color:"black", 
      city:"zhengzhou", 
      act:function(){alert("eatting");} 
    }; 
 
    var boy=new Person(); 
    Person.prototype.hobby="basketball"; 
     
    alert(boy.hobby);  //basketball 
    alert(girl.first_name);  //undefined

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

function Person(){}
    
    Person.prototype={
      first_name:"guo",
      hair_color:"black",
      friends:["Nick","John"],
      city:"zhengzhou",
      act:function(){alert("eatting");}
    };

    var boy=new Person();
    boy.friends.push("Mike");
    var girl=new Person();
    alert(boy.friends);  //Nick,John,Mike
    alert(girl.friends); //Nick,John,MIke

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

function Person(hair_color,city){ 
       
      this.hair_color=hair_color; 
      this.city=city; 
      this.friends=["John","Nick"]; 
    } 
    Person.prototype={ 
      constructor:Person, 
      first_name:"guo", 
      act:function() { 
         
        alert("eatting"); 
      } 
    }; 
    var boy=new Person("black","zhengzhou"); 
    var girl=new Person("red","shenyang"); 
    boy.friends.push("Nick"); 
    alert(girl.friends); 
    alert(boy.friends);

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

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

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

以上这篇javaScript中的原型解析【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类似框架的js代码
Nov 09 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 #Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 #Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 #Javascript
基于jQuery实现动态搜索显示功能
May 05 #Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 #Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 #Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
Symfony核心类概述
2016/03/17 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
限制复选框的最大可选数
2006/07/01 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
项目考察欢迎辞
2014/01/17 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
十八大标语口号
2014/10/09 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
python常见的占位符总结及用法
2021/07/02 Python