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技巧收藏
Apr 07 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
javascript中new关键字详解
Dec 14 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
PHP守护进程实例
2015/03/06 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python实现滑雪者小游戏
2020/02/22 Python
jupyter notebook清除输出方式
2020/04/10 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
办公室员工岗位工作职责
2014/03/10 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
python中pycryto实现数据加密
2022/04/29 Python
KVM基础命令详解
2022/04/30 Servers
mysql查看表结构的三种方法总结
2022/07/07 MySQL