浅谈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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
JS面向对象编程详解
Mar 06 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
ES6 fetch函数与后台交互实现
Nov 14 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
全面了解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生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
PHP基本语法总结
2014/09/06 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
深入浅析python定时杀进程
2016/06/06 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python箱型图处理离群点的例子
2019/12/09 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
出国导师推荐信
2014/01/16 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js