浅谈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 通过模式匹配实现重载
Aug 12 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
vue中实现上传文件给后台实例详解
Aug 22 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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编程中八种常见的文件操作方式
2006/11/19 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
python错误处理详解
2014/09/28 Python
RC4文件加密的python实现方法
2015/06/30 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python机器人行走步数问题的解决
2018/01/29 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
财务部经理岗位职责
2014/02/03 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
自我推荐信怎么写
2015/03/24 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android