浅谈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 相关文章推荐
JQuery select标签操作代码段
May 16 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
js验证密码强度解析
Mar 18 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 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 写文本日志实现代码
2010/05/18 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
Angular路由简单学习
2016/12/26 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
loading动画特效小结
2017/01/22 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
神经网络python源码分享
2017/12/15 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
pycharm的python_stubs问题
2020/04/08 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
python模块内置属性概念及实例
2021/02/18 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
银行门卫岗位职责
2013/12/29 职场文书
给民警的表扬信
2014/01/08 职场文书
四下基层实施方案
2014/03/28 职场文书
初级党校心得体会
2014/09/11 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
4种方法python批量修改替换列表中元素
2022/04/07 Python