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 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
原生JS进行前后端同构
Apr 22 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
example2.php
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
python类参数self使用示例
2014/02/17 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python中常用的内置方法
2019/01/28 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
校长就职演讲稿
2014/01/06 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
留学推荐信英文范文
2015/03/26 职场文书
学校通报表扬范文
2015/05/04 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
table不让td文字溢出操作方法
2022/12/24 HTML / CSS