js使用原型对象(prototype)需要注意的地方


Posted in Javascript onAugust 28, 2017

我们先来一个简单的构造函数+原型对象的小程序

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }

这个程序,没有什么问题,但是非常的冗余,每次扩展一个方法,都要写一次原型对象,我们可以把原型对象prototype当做一个字面量对象,所有的方法都在字面量对象中扩展,可以达到同样的效果:

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    var obj2 = new CreateObj( '卫庄', 24 );
    console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
    console.log( obj2.showUserName(), obj2.showUserAge() ); //卫庄 24

但是这种原型(prototype)对象的写法,属于重写了CreateObj的默认原型对象,造成的第一个问题就是constructor不再指向CreateObj.

没有重写之前,constructor指向CreateObj

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //true

重写之后,constructor指向Object

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //false
    console.log( CreateObj.prototype.constructor === Object ); //true

所以说,constructor不能准确的标识对象,因为他会被修改

我们之前写的程序,基本都是在原型对象(prototype)上扩展完了方法之后,再实例化对象,我们看下,先实例化对象,再在原型对象(prototype)上扩展函数,

实例对象是否能正常的调用到扩展的方法?

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype.showUserName = function(){
      return this.userName;
    }
    console.log( obj1.showUserName() ); //ghostwu

可以正常调用,但是,如果原型对象是重写的,就调用不到了

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype = {
      showUserName : function(){
        return this.userName;
      }
    }
    console.log( obj1.showUserName() ); //报错

因为重写了原型对象之后,同时实例化又是在重写之前发生的,所以实例的隐式原型__proto__不会指向重写的原型对象,所以就调用不到另一个问题,如果在原型对象(prototype)上有引用类型,千万小心,因为多个实例共用原型对象,只要有一个实例改变了引用类型的值,其他实例全部会收到改变之后的结果。

function CreateObj(){}
    CreateObj.prototype = {
      name : 'ghostwu',
      skills : [ 'php', 'javascript', 'linux' ]
    };
    var obj1 = new CreateObj();
    obj1.skills.push( 'python' );
    var obj2 = new CreateObj();
    console.log( obj2.skills ); //'php', 'javascript', 'linux', 'python'

原型对象(prototype)的共享特性,可以很方便的为一些内置的对象扩展一些方法,比如,数组去重复

Array.prototype.unique = function(){
      var res = [];
      for( var i = 0, len = this.length; i < len; i++ ){
        if( res.indexOf( this[i] ) == -1 ) {
          res.push( this[i] ); 
        }
      }
      return res;
    }
    var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ];
    console.log( arr.unique() ); //10, 20, 30, 40

但是,不要随便往内置的对象上面扩展方法,在多人协作开发,很容易产生覆盖,以及污染。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现判断碰撞的方法
Feb 11 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
jQuery操作cookie
Aug 08 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 #Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
JS实现图片手风琴效果
Apr 17 #Javascript
vue服务端渲染的实例代码
Aug 28 #Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 #Javascript
vue.js路由跳转详解
Aug 28 #Javascript
You might like
html读出文本文件内容
2007/01/22 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
设计师求职信模板
2014/05/06 职场文书
2014年女职工工作总结
2014/11/27 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
超市店长竞聘书
2015/09/15 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
详解Redis主从复制实践
2021/05/19 Redis
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python