JavaScript基础有关构造函数、new关键字和this关键字(009)

1. 总是记得用new关键字来执行构造函数。
前面提到,可以用构造函数创建JavaScript的对象,这个构造函数在使用的时候需要使用new关键字,但如果忘记写入new关键字,会怎么样?事实上这个函数还是会被执行的,没有语法错误,但有逻辑错误。因此如果没有用new关键字,函数里的this指针将不会被存放新的对象的引用,实际存入是的全局对象。如果你在网页里执行代码,这个this就是window。比如,这个时候,构造函数里的this.member指向的就是window.member。如果在全局对象window里没有定义这个member属性,这个属性将会被隐式的声明!这有可能会捅出个大篓子:

// constructor
function Waffle() {
    this.tastes = "yummy";
}

// a new object
var good_morning = new Waffle();
console.log(typeof good_morning); // "object"
console.log(good_morning.tastes); // "yummy"

// antipattern:
// forgotten `new`
var good_morning = Waffle();
console.log(typeof good_morning); // "undefined"
console.log(window.tastes); // "yummy"

这就是为什么我们应该让构造函数的首字母大写,让人一看就知道它是个构造函数。因为它如果不用new关键字执行,是会出问题的。

2. 在构造函数中别用this,用that
既然在构造函数中用了this会有隐患,那么我们可以别用this,改用that。当然,that不是个关键字。所以构造函数会变成这个样子:

function Waffle() {
    var that = {};
    that.tastes = "yummy";
    return that;
}

这看起来有点奇怪,不过的确能提高代码的安全性。如果需要构造的对象足够简单,也可以直接return一个Literal的对象:

function Waffle() {
    return {
        tastes: "yummy"
    };
}

使用这种方法写出的构造函数,总是能返回一个我们需要的对象,不管它是如果被调用的:

var first = new Waffle(),
    second = Waffle();
console.log(first.tastes); // "yummy"
console.log(second.tastes); // "yummy"

这种模式的最大问题是,新建的对象与Waffle对象的原型之间的关系丢失了,而通过Waffle的原型加入通用方法将不能奏效。如果要保证新对象和Waffle原型之间的关系,可以使用instanceof做个判断,然后再决定如何创建对象:

function Waffle() {
    if (!(this instanceof Waffle)) {
        return new Waffle();
    }
    this.tastes = "yummy";
}
Waffle.prototype.wantAnother = true;

// testing invocations
var first = new Waffle(),
    second = Waffle();
console.log(first.tastes); // "yummy"
console.log(second.tastes); // "yummy"
console.log(first.wantAnother); // true
console.log(second.wantAnother); // true

还有一种通用的方法可以检查调用构造函数的方式 ,就是通过arguments.callee来判断:

if (!(this instanceof arguments.callee)) {
    return new arguments.callee();
}

这种方法的原理是,所有的函数对象中,都有一个arguments的成员对象,arguments的其中一个属性叫callee,它指向这个函数的调用者。但这种方法并不适用过严格的JavaScript标准,所以不建议使用。

时间: 2024-12-07 13:27:29

JavaScript基础有关构造函数、new关键字和this关键字(009)的相关文章

【javascript基础】6、new与构造函数

原文:[javascript基础]6.new与构造函数 前言 上篇说创建对象的时候提到了带返回值的构造函数,那里没有和大家说这个问题,今天就和大家一起学习构造函数和new操作符.我也是最近才稍微弄明白点这个构造函数,以前总是忽略一些问题,现在就是想到哪块不行,就研究下,查查资料,自己捣鼓捣鼓,希望大家也随手记一下自己突然想起的哪块不熟悉知识点. javascript中的类 JavaScript 是面向对象的语言,但是他的面向对象不是基于类的,是基于原型的.javascript中没有是类,任何所谓

Javascript 基础-------this关键字

话说很多同学在刚学Javascript的时候,总会遇到this这个关键字,而它在不同的场景里面,经常指向不同的对象,一下子很容易把初学者给绕晕了.其实理解了其原理,就很清晰的知道this指向了具体的哪个对象. 废话少说,直入主题! this关键字一般有四种用法,总结如下表格 函数 挂在全局global对象,浏览器即window对象 方法 作为某个对象的方法,一般都指向该对象 new 构造函数 new 首字母大写的函数(),this就会绑定到这个新生成到对象 apply / call应用 this

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

JavaScript基础细讲

JavaScript基础细讲 JavaScript语言的前身叫作Livescript.自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript 重新进行设计,并改名为JavaScript. JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动.使用它的目的是与HTML超文本标识语言.Java 脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可

【javascript基础】5、创建对象

原文:[javascript基础]5.创建对象 前言 今天从家里回到了学校,在家呆了十天,胖了几斤的重量,又折腾回学校了,春节回家真是艰辛的路途.随便扯扯我的往返行程:为了省钱我没有选择直飞到长春往返都是到北京转的,这样我和女朋友可以节省4000块左右.1月24号深圳-飞机-北京(飞机晚点1个小时),到北京已经凌晨两点多,机场大巴就剩两个了,做一个大巴到了市里在打的到同学那100块没了,到同学那(天通苑附近)都三点了,吃饭喝酒(一瓶牛栏山+2瓶啤酒)到了五点,睡觉到十点,起床去打了两个小时的篮球

【javascript基础】2、函数

原文:[javascript基础]2.函数 前言 我在上一篇[javascript基础]基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道大家可能就是点开一下而已,但是还是给我一些继续写下去的信心.那今天写一些关于javascript函数的一些知识,帮助大家熟悉或者复习一些函数的基本知识. PS:最近jQuery源码交流群( 239147101)加了不少热新人,希望大家还是以学习为主,尽量少

JavaScript基础---语言基础(4)

函数,对象和数组 学习要点: 1.函数声明 2.return返回值 3.arguments对象 4.Object类型 5.Array类型 6.对象中的方法 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函数调用表达式的值. 一.函数声明 函数对任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.ECMAScript中的函数使用functi

JavaScript基础---语言基础(3)

流程控制语句 学习要点: 1.switch语句 2.for...in语句 3.break和continue语句 4.with语句 ECMA-262规定了一组流程控制语句.语句定义了ECMAScript中的主要语法,语句通常由一个或者多个关键字来完成给定的任务.诸如:判断.循环.退出等.   一.switch语句 switch语句是多重条件判断,用于多个值相等的比较. var box = 1; switch (box) {                                      

JavaScript基础之数据类型部分总结

JavaScript 是世界上最流行的脚本语言,被设计为向 HTML 页面增加交互性. 我把它的基础语法分为了三个部分:数据类型,运算符,流程控制语句.入门还是比较容易的. 基本概念: 标识符:指变量.函数.属性的名字,或者函数的参数. 命名规则:可以由字母,数字,下划线_, $组成,但是不能以数字开头,对大小写敏感,区分大小写. JavaScript是弱类型语言,定义变量的时候不用指定变量的类型.定义变量时要使用 var 操作符,比如,var a=10; var b="hello";