浅谈js构造函数的方法与原型prototype


Posted in Javascript onJuly 04, 2016

把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法。

•函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法.

•prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的内存占用就比较小.

•在实际的应用中,这两种方法往往是结合使用的;所以我们要首先了解我们需要的是什么,然后再去选择如何使用

// 构造函数A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}

// 构造函数B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();

写了两个构造函数,第一个是A,这个构造函数里面包含了一个方法sayHello;第二个是构造函数B, 我们把那个方法sayHello写在了构造函数B的prototype属性上面.把方法写在构造函数的内部,增加了通过构造函数初始化一个对象的成本,把方法写在prototype属性上就有效的减少了这种成本. 你也许会觉得,调用对象上的方法要比调用它的原型链上的方法快得多,其实并不是这样的,如果你的那个对象上面不是有很多的原型的话,它们的速度其实是差不多的

另外,需要注意的一些地方:

•首先如果是在函数的prototype属性上定义方法的话,要牢记一点,如果你改变某个方法,那么由这个构造函数产生的所有对象的那个方法都会被改变.

•还有一点就是变量提升的问题,我们可以稍微的看一下下面的代码:

func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function
var func1 = function() {
  console.log('func1');
};

func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
  console.log('func2');
}

•关于对象序列化的问题.定义在函数的prototype上的属性不会被序列化,可以看下面的代码:

function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';

var a = new A('dreamapple');
console.log(JSON.stringify(a));

我们可以看到输出结果是{"name":"dreamapple"}

以上这篇浅谈js构造函数的方法与原型prototype就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
详解原生JS回到顶部
Mar 25 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
详解Javascript实践中的命令模式
May 05 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
全面了解js中的script标签
Jul 04 #Javascript
jQuery基础_入门必看知识点
Jul 04 #Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 #Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 #Javascript
js输出数据精确到小数点后n位代码
Jul 02 #Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 #Javascript
JavaScript Ajax编程 应用篇
Jul 02 #Javascript
You might like
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python super用法及原理详解
2020/01/20 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
合同专员岗位职责
2013/12/18 职场文书
工作中个人的自我评价
2013/12/31 职场文书
文明班级申报材料
2014/12/24 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
利用Python判断你的密码难度等级
2021/06/02 Python