Javascript之深入浅出prototype


Posted in Javascript onFebruary 06, 2017

我们先来讲一个故事,一个大大的池塘,里面有很多鱼。这是属于我们大家的池塘所以里面的鱼我们都可以吃,但是我们也会从集市买一些鱼放在家里,那么放在家里的鱼肯定是属于我们私人的,外人是不会拥有的。那么在js里我们就把这个池塘称为原型对象,池塘里面我们所共享的鱼称为原型中的属性及方法,而我们自己的鱼称为构造函数中的属性及方法,我们是什么呢?对了,我们是对象的实例

以上是为了让大家能够趣味性的对prototype有一个概念,接下来就通过代码具体总结一下prototype~

一、理解prototype

我们创建的每一个函数都有一个prototype属性,这个属性是一个指向对象的指针。

构建对象中有一种模式叫做原型模式,意思是将对象实例所不可共享的属性及方法定义在构造函数中,而将可共享的属性及方法放在原型对象中,也就是prototype指向的对象中。以下是用原型模式创建的一个对象:

function person(name, age) {
 this.name = name;
 this.age = age;
}
person.prototype = {
 sayName: function() {
 console.log(this.name); 
 }
};
var p1 = new person("Wind", 20);
p1.sayName(); // "Wind"
var p2 = new person("Nic", 20);
p2.sayName(); // Nic

这里我将name、age属性定义在构造函数中,将sayName方法定义在原型中。所以p1和p2对象实例的内存空间里面各有一份name和age,但是它们却共享一份sayName方法,意思是它们调用的sayName方法是同一个。

试想如果我们不用prototype,而是直接将sayName写进构造函数呢?

那么p1和p2中将各有一份sayName,这样浪费内存空间,所以用prototype的好处之一:提高了代码的复用性,减少内存

在了解原型对象的同时我们还有一个小知识要明白:每当代码读取一个对象属性的时候会执行一次搜索,搜索目标是给定名字的属性,搜索路径为:

对象实例本身---->原型对象---->对象所继承的父类对象---->父类对象原型...---->原型链末端

二、prototype的注意点

1、不可变性:尽管prototype是共享的,但不能通过对象实例重写原型中的值,但是可以由对象统一改。通俗一点:只能爸爸统一改,不能儿子改。(这也和类型有关系,孩子不能改变基本类型的值,但是可以改变对象,比如数组)

基本类型:

function person() {}
person.prototype = { 
 num: 0
}; 
var p1 = new person(); 
var p2 = new person();
p1.num++;
p2.num; // 0

非基本类型:

function person() {}
person.prototype = {
 num: [1,2,3]
}; 
var p1 = new person(); 
var p2 = new person();
p1.num[2] = 8; 
p2.num; // [1, 2, 8] 改变了

2、同名覆盖性:如果我们在实例中添加了一个与原型属性同名的属性,那么该属性会创建到对象实例中并且会覆盖掉原型中的相应属性。

function person(name) {
 this.name = name; 
}
person.prototype = {
 age: 18 9 };
var p1 = new person("Wind");
var p2 = new person("Nic");
p1.age = 20;
p1.age; // 20
p2.age; // 18

3、使用对象字面量创建原型方法,会切断之前的链而重写原型链

function person(name) {
 this.name = name; 
}
person.prototype = { 
 sayName: function() {
 console.log(this.name); 
 }
};
var p1 = new person("Wind");
person.prototype = {
 age = 20
}; 
p1.sayName(); // error

因为prototype指针指向了一个新的对象,切断了构造函数与之前的prototype旧对象的联系,所以p1不能调用了它。那么p1调用新对象的属性呢?

p1.age; // error

所以我做了一个大胆的猜测,就是以前包含sayName的旧对象被“抛弃”了,也就是被内存回收了,然而p1的prototype指针指向的依旧是旧对象,所以会产生error。

三、总结

 prototype的用法:构造函数模型用于定义实例的属性,而原型模型用于定义方法和共享的属性。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Extjs表单常见验证小结
Mar 07 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
如何使用angularJs
May 08 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 #Javascript
canvas实现图像布局填充功能
Feb 06 #Javascript
canvas实现图像截取功能
Feb 06 #Javascript
JS跨域请求外部服务器的资源
Feb 06 #Javascript
canvas实现动态小球重叠效果
Feb 06 #Javascript
canvas滤镜效果实现代码
Feb 06 #Javascript
canvas实现图像放大镜
Feb 06 #Javascript
You might like
php实现简单的MVC框架实例
2015/09/23 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
Javascript中神奇的this
2016/01/20 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python中的装饰器详解
2015/04/13 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
QML用PathView实现轮播图
2020/06/03 Python
python 获取计算机的网卡信息
2021/02/18 Python
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
计划生育证明格式范本
2014/09/12 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
超强台风观后感
2015/06/09 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript