浅谈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 产生不重复的随机数三种实现思路
Dec 13 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
node.js中的console用法总结
Dec 15 Javascript
移动端界面的适配
Jan 11 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
详解React 条件渲染
Jul 08 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
Dedecms常用函数解析
2008/02/01 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JS location几个方法小姐
2008/07/09 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
微信小程序实现滑动操作代码
2020/04/23 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python数据可视化图实现过程详解
2020/06/12 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
模具专业推荐信
2013/10/30 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
授权委托书怎么写
2014/04/03 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
门面租赁合同范文
2019/08/06 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书