JavaScript prototype 使用介绍


Posted in Javascript onAugust 29, 2013

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱。

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

私有变量、函数

在具体说prototype前说几个相关的东东,可以更好的理解prototype的设计意图。之前写的一篇JavaScript 命名空间文章中提到过JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数                }
            }

这样在函数对象Obj外部无法访问变量a和函数fn,它们就变成私有的,只能在Obj内部使用,即使是函数Obj的实例仍然无法访问这些变量和函数

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

静态变量、函数

当定义一个函数后通过 “.”为其添加的属性和函数,通过对象本身仍然可以访问得到,但是其实例却访问不到,这样的变量和函数分别被称为静态变量和静态函数,用过Java、C#的同学很好理解静态的含义。

function Obj(){            }
            Obj.a=0; //静态变量
            Obj.fn=function(){ //静态函数
            }
            console.log(Obj.a); //0
            console.log(typeof Obj.fn); //function
            var o=new Obj();
            console.log(o.a); //undefined
            console.log(typeof o.fn); //undefined

实例变量、函数

在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法,实例化后可以访问,JavaScript也能做到这样

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法                }
            }
            console.log(typeof Obj.a); //undefined
            console.log(typeof Obj.fn); //undefined
            var o=new Obj();
            console.log(typeof o.a); //object
            console.log(typeof o.fn); //function

这样可以达到上述目的,然而

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法                }
            }
            var o1=new Obj();
            o1.a.push(1);
            o1.fn={};
            console.log(o1.a); //[1]
            console.log(typeof o1.fn); //object
            var o2=new Obj();
            console.log(o2.a); //[]
            console.log(typeof o2.fn); //function

上面的代码运行结果完全符合预期,但同时也说明一个问题,在o1中修改了a和fn,而在o2中没有改变,由于数组和函数都是对象,是引用类型,这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用,而是对Obj对象定义的属性和方法的一个复制。

这个对属性来说没有什么问题,但是对于方法来说问题就很大了,因为方法都是在做完全一样的功能,但是却又两份复制,如果一个函数对象有上千和实例方法,那么它的每个实例都要保持一份上千个方法的复制,这显然是不科学的,这可肿么办呢,prototype应运而生。

prototype

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,有些绕了啊,写代码、上图!

function Person(){            }

JavaScript prototype 使用介绍

根据上图可以看出Person对象会自动获得prototyp属性,而prototype也是一个对象,会自动获得一个constructor属性,该属性正是指向Person对象。

当调用构造函数创建一个实例的时候,实例内部将包含一个内部指针(很多浏览器这个指针名字为__proto__)指向构造函数的prototype,这个连接存在于实例和构造函数的prototype之间,而不是实例与构造函数之间。

function Person(name){
                this.name=name;
            }            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');

JavaScript prototype 使用介绍

Person的实例person1中包含了name属性,同时自动生成一个__proto__属性,该属性指向Person的prototype,可以访问到prototype内定义的printName方法,大概就是这个样子的

JavaScript prototype 使用介绍

写段程序测试一下看看prototype内属性、方法是能够共享

function Person(name){
                this.name=name;
            }            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }
            var person1=new Person('Byron');
            var person2=new Person('Frank');
            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //[1,2]

果不其然!实际上当代码读取某个对象的某个属性的时候,都会执行一遍搜索,目标是具有给定名字的属性,搜索首先从对象实例开始,如果在实例中找到该属性则返回,如果没有则查找prototype,如果还是没有找到则继续递归prototype的prototype对象,直到找到为止,如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数,则会覆盖prototype的属性或函数。

function Person(name){
                this.name=name;
            }            Person.prototype.share=[];

            var person=new Person('Byron');
            person.share=0;
            console.log(person.share); //0而不是prototype中的[]

构造简单对象

当然prototype不是专门为解决上面问题而定义的,但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象,如果希望实例对象的属性或函数则定义到prototype中,如果希望每个实例单独拥有的属性或方法则定义到this中,可以通过构造函数传递实例化参数。

function Person(name){
                this.name=name;
            }            Person.prototype.share=[];
            Person.prototype.printName=function(){
                alert(this.name);
            }

作者:色拉油

Javascript 相关文章推荐
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
JavaScript创建对象的写法
Aug 29 #Javascript
jQuery实现用户注册的表单验证示例
Aug 28 #Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 #Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 #Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 #Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 #Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 #Javascript
You might like
php提示undefined index的几种解决方法
2012/05/21 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
Python银行系统实战源码
2019/10/25 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
红色旅游心得体会
2014/09/03 职场文书
公司证明怎么写
2014/09/22 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js