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 相关文章推荐
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
RequireJS用法简单示例
Aug 20 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
vue debug 二种方法
Sep 16 Javascript
js实现搜索栏效果
Nov 16 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
详细分析React 表单与事件
Jul 08 Javascript
原生JS生成指定位数的验证码
Oct 28 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
javascript实现密码验证
2015/11/10 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python反转序列的方法实例分析
2018/03/21 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
浅析NumPy 切片和索引
2020/09/02 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
三峡大坝导游词
2015/01/31 职场文书
李强感恩观后感
2015/06/17 职场文书
python基础之停用词过滤详解
2021/04/21 Python
MySQL 角色(role)功能介绍
2021/04/24 MySQL
详解GaussDB for MySQL性能优化
2021/05/18 MySQL