javascript中使用new与不使用实例化对象的区别


Posted in Javascript onJune 22, 2015

我们先来看个实例

function Me(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}

请问这以下两种实例化对象方式有什么区别呢?

var mefun1 = new Me('fei','20','it');
var mefun2 = Me('fei','20','it');

简单的说

第一种是构造函数式,即通过new运算符调用构造函数Function来创建函数
第二种不是实例化,只是调用函数把返回值赋给变量。

再扩展下

JavaScript 中并没有真正的类,但JavaScript 中有构造函数和new 运算符。构造函数用来给实例对象初始化属性和值。任何JavaScript 函数都可以用做构造函数,构造函数必须使用new 运算符作为前缀来创建新的实例。

new 运算符改变了函数的执行上下文,同时改变了return 语句的行为。实际上,使用new和构造函数很类似于传统的实现了类的语言:

// 实例化一个Me
var alice = new Me('alice', 18, 'Coder');
// 检查这个实例
assert( alice instanceof Me );

构造函数的命名通常使用驼峰命名法,首字母大写,以此和普通的函数区分开来,这是
一种习惯用法。

// 不要这么做!
Me('alice', 18, 'Coder'); //=> undefined

这个函数只会返回undefined,并且执行上下文是window(全局)对象,无意间创建了3个全局变量name,age,job。调用构造函数时不要丢掉new 关键字。

当使用new 关键字来调用构造函数时,执行上下文从全局对象(window)变成一个空的上下文,这个上下文代表了新生成的实例。因此,this 关键字指向当前创建的实例。尽管理解起来有些绕,实际上其他语言内置类机制的实现也是如此。

默认情况下,如果你的构造函数中没有返回任何内容,就会返回this——当前的上下文。

要不然就返回任意非原始类型的值.

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
canvas绘制的直线动画
Jan 23 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
浅谈javascript构造函数与实例化对象
Jun 22 #Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 #Javascript
jQuery实现文本框输入同步的方法
Jun 20 #Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 #Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 #Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 #Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python去除扩展名的实例讲解
2018/04/23 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python实现打印实心和空心菱形
2019/11/23 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
公司员工管理制度
2015/08/04 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python