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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
浅谈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
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
在Python中使用SQLite的简单教程
2015/04/29 Python
Python实现带百分比的进度条
2016/06/28 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
仓库主管岗位职责
2014/03/02 职场文书
工作岗位说明书模板
2014/05/09 职场文书
节能标语大全
2014/06/21 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
如何写新闻稿
2015/07/18 职场文书
校运会广播稿
2015/08/19 职场文书