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内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
Javascript中With语句用法实例
May 14 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
BootStrap的两种模态框方式
May 10 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
vue表单数据交互提交演示教程
Nov 13 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
潜说js对象和数组
2011/05/25 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
英语自我评价范文
2014/01/24 职场文书
实验教师岗位职责
2014/02/13 职场文书
内衣营销方案
2014/03/15 职场文书
《菜园里》教学反思
2014/04/17 职场文书
促销活动总结报告
2014/04/26 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis