浅谈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 相关文章推荐
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 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 数字左侧自动补0
2008/03/31 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
实例解析php的数据类型
2018/10/24 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Django的信号机制详解
2017/05/05 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
python用户管理系统
2018/03/13 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
公司员工检讨书
2014/02/08 职场文书
文明风采获奖感言
2014/02/18 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
会计工作态度自我评价
2015/03/06 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
关于迟到的检讨书
2015/05/06 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android