你不知道的JavaScript--Item8 函数,方法,构造函数调用
1、函数调用
Function绝对是JavaScript中的重中之重。在JavaScript中,Function承担了procedures, methods, constructors甚至是classes以及modules的功能。
在面向对象程序设计中,functions,methods以及class constructor往往是三件不同的事情,由不同的语法来实现。但是在JavaScript中,这三个概念都由function来实现,通过三种不同的模式。
最简单的使用模式就是function 调用:
function hello(username) {
return "hello, " + username;
}
hello("Keyser Söze"); // "hello, Keyser Söze"
2、方法的调用
而methods这一概念在JavaScript中的表现就是,一个对象的属性是一个function:同样的是函数,将其赋值给一个对象的成员以后,就不一样了。将函数赋值给对象的成员后,那么这个就不在称为函数,而应该叫做方法。
var obj = {
hello: function() {
return "hello, " + this.username;
},
username: "Hans Gruber"
};
obj.hello(); // "hello, Hans Gruber"
真正的行为是,调用本身才会决定this会绑定到哪个对象,即:
obj1.hello()会将this绑定到obj1,obj2.hello()则会将this绑定到obj2。记住一句话,谁调用,this就指向谁
正因为this绑定的这种规则,在下面的用法也是可行的:
function hello() {
return "hello, " + this.username;
}
var obj1 = {
hello: hello,
username: "Gordon Gekko"
};
obj1.hello(); // "hello, Gordon Gekko"
var obj2 = {
hello: hello,
username: "Biff Tannen"
};_
obj2.hello(); // "hello, Biff Tannen"
但是,在一个普通的函数中,如上面的hello函数,使用this关键字是不太好的方式,当它被直接调用的时候,this的指向就成了问题。在这种情况下,this往往被指向全局对象(GlobalObject),在浏览器上一般就是window对象。
而这种行为是不确定和没有意义的。
所以在ES5标准中,如果使用了strict mode,那么this会被设置为undefined:
function hello() {
"use strict";
return "hello, " + this.username;
}
hello(); // error: cannot read property "username" of undefined
以上这种做法是为了让潜在的错误更快的暴露出来,避免了误操作和难以找到的bug。
区别普通函数调用和方法调用,直接看这个例子就明确了。
var func = function() {
alert(this);
};
var o = {};
o.fn = func;
// 比较
alert(o.fn === func);//true
// 调用
func();//[object Window]
o.fn();//[object Object]
这里的运行结果是,两个函数是相同的,因此打印结果是 true。但是由于两个函数的调用是不一样的,func 的调用,打印的是 [object Window],而 o.fn 的打印结果是 [object Object]。
这里便是函数调用与方法调用的区别,函数调用中,this 专指全局对象 window,而在方法中 this 专指当前对象,即 o.fn 中的 this 指的就是对象o。
3、构造函数的调用
function的第三种使用模式就是讲它作为constructor:
构造器中的this
我们需要分析创建对象的过程,方能知道this的意义. 如下面代码:
var Person = function() {
this.name = "小平果";
};
var p = new Person();
这里首先定义了函数Person,下面分析一下整个执行:
- 程序在执行到这一句的时候,不会执行函数体,因此 JavaScript的解释器并不知道这个函数的内容.
- 接下来执行new关键字,创建对象,解释器开辟内存,得到对象的引用,将新对象的引用交给函数.
- 紧接着执行函数,将传过来的对象引用交给this. 也就是说,在构造方法中,this就是刚刚被new创建出来的对象.
- 然后为this 添加成员,也就是为对象添加成员.
- 最后函数结束,返回this,将this交给左边的变量.
分析过构造函数的执行以后,可以得到,构造函数中的this就是当前对象.
构造器中的 return
在构造函数中return的意义发生了变化,首先如果在构造函数中,如果返回的是一个对象,那么就保留原意. 如果返回的是非对象,比如数字、布尔和字符串,那么就返回this,如果没有return语句,那么也返回this. 看下面代码:
// 返回一个对象的 return
var ctr = function() {
this.name = "赵晓虎";
return {
name:"牛亮亮"
};
};
// 创建对象
var p = new ctr();
// 访问name属性
alert(p.name);
//执行代码,这里打印的结果是"牛亮亮". 因为构造方法中返回的是一个对象,那么保留return的意义,返回内容为return后面的对象. 再看下面代码:
// 定义返回非对象数据的构造器
var ctr = function() {
this.name = "赵晓虎";
return "牛亮亮";
};
// 创建对象
var p = new ctr();
// 使用
alert(p);
alert(p.name);
代码运行结果是,先弹窗打印[object Object],然后打印”赵晓虎”. 因为这里 return 的是一个字符串,属于基本类型,那么这里的return语句无效,返回的是this对象. 因此第一个打印的是[object Object]而第二个不会打印undefined.
function User(name, passwordHash) {
this.name = name;
this.passwordHash = passwordHash;
}
var u = new User("sfalken",
"0ef33ae791068ec64b502d6cb0191387");
u.name; // "sfalken"
使用new关键将function作为constructor进行调用。和function以及method调用不一样的是,constructor会传入一个新的对象并将它绑定到this,然后返回该对象作为constructor的返回值。而constructor function本身的作用就是为了初始化该对象。
构造函数调用常犯的一个错误
兴致勃勃地定义了下面这么个构造函数:
var Coder = function( nick ){
this.nick = nick;
};
定义构造函数结束后呢?没错,赶紧实例化:
var coder = Coder( 'casper' );
这个coder兄弟叫什么名字?赶紧打印下:
console.log( coder.nick ); //undefined
= =b 竟然是undefined!!再回过头看看实例化的那个语句,不难发现问题出在哪里:少了个new
var coder = Coder( 'casper' ); //当作普通的函数来调用,故内部的this指针其实指向window对象
console.log( window.nick); //输出:casper
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正确地指向了当前创建的实例
console.log( coder.nick ); //输出:casper
这样的错误貌似挺低级的,但出现的概率挺高的,肿么去避免或减少这种情况的发生呢?
可以在内部实现里面动下手脚:
var Coder = function( nick ){
if( !(this instanceof Coder) ){
return new Coder( nick );
}
this.nick = nick;
};
其实很简单,实例化的时候,内部判断下,当前this指向的对象的类型即可,如果非当前构造函数的类型,强制重新调用一遍构造函数。
突然觉得Coder这名字不够洋气?想用Hacker,好吧,我改。。。数了下,一共有三处要改,这不科学,有没有办法只把构造函数的名字改了就行?
当然有:
var Coder = function( nick ){
if( !(this instanceof arguments.callee) ){
return new arguments.callee( nick );
}
this.nick = nick;
};
tips:据说在ES 5的严格模式下面arguments.callee会被禁用,不过仅当ES 5普及同时你指定了要使用严格模式,否则还是可以用的发散下思维。
系列文章导航:
3、你不知道的JavaScript–Item3 隐式强制转换
4、你不知道的JavaScript–Item4 基本类型和基本包装类型(引用类型)
6、你不知道的JavaScript–Item6 var预解析与函数声明提升(hoist )
7、你不知道的JavaScript–Item7 函数和(命名)函数表达式
8、你不知道的JavaScript–Item8 函数,方法,构造函数调用
9、你不知道的JavaScript–Item9 call(),apply(),bind()与回调
10、你不知道的JavaScript–Item10 闭包(closure)
11、你不知道的JavaScript–Item11 arguments对象
12、你不知道的JavaScript–Item12 undefined 与 null
13、你不知道的JavaScript–Item13 理解 prototype, getPrototypeOf 和_ proto_
14、你不知道的JavaScript–Item14 使用prototype的几点注意事项
15、你不知道的JavaScript–Item15 prototype原型和原型链详解
16、你不知道的JavaScript–Item16 for 循环和for…in 循环的那点事儿
17、你不知道的JavaScript–Item17 循环与prototype最后的几点小tips
18、你不知道的JavaScript–Item18 JScript的Bug与内存管理
19、你不知道的JavaScript–Item19 执行上下文(execution context)
20、你不知道的JavaScript–Item20 作用域与作用域链(scope chain)
21、你不知道的JavaScript–Item21 漂移的this
持续更新中……………….
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226
你不知道的JavaScript--Item8 函数,方法,构造函数调用的更多相关文章
- javascript 实现函数/方法重载效果
什么是重载? 在C#和JAVA等编程语言中函数重载是指在一个类中可以定义多个方法名相同但是方法参数和顺序不同的方法,以此来实现不同的功能和操作,这就是重载. JS没有重载,只能模拟重载 一般来说,如果 ...
- 理解JavaScript中函数方法
1.函数声明和函数表达式 通过字面量创建函数的方式有两种函数声明和函数表达式: 函数声明: function sum(x, y) { var result = x + y; return result ...
- [Effective JavaScript 笔记]第18条:理解函数调用、方法调用及构造函数调用之间的不同
面向对象编程中,函数.方法.类的构造函数是三种不同的概念. JS中,它们只是单个构造对象的三种不同的使用模式. 三种不同的使用模式 函数调用 function hello(username){ ret ...
- JavaScript 你不知道的事 -- 关于函数
接上篇Javascript 你不知道的事,直接条列了: 每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__ ...
- 5种 JavaScript 调用函数的方法
一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性 ...
- JavaScript调用函数的方法
摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正 ...
- JavaScript之函数,词法分析,内置对象和方法
函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...
- JavaScript回调函数及数组方法测试
JavaScript回调函数及数组方法测试 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...
- javascript的函数、创建对象、封装、属性和方法、继承
转自原文javascript的函数.创建对象.封装.属性和方法.继承 一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:functi ...
随机推荐
- Linux查询已开启文件或已运行进程开启之文件fuser,lsof,pidof
fuser:藉由文件(或文件系统)找出正在使用该文件的程序 [root@www ~]# fuser [-umv] [-k [i] [-signal]] file/dir 选项与参数: -u :除了进程 ...
- OpenCV——PS 滤镜, 浮雕效果
具体的算法原理可以参考: PS 滤镜, 浮雕效果 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITH ...
- bash配置文件说明
login shell: /etc/profile 所有用户全局设定,它首先会调用以下文件: /etc/inputrc /etc/profile.d/*.sh /etc/sys ...
- The 12th tip of DB Query Analyzer, powerful in text file process
MA Gen feng ( Guangdong Unitoll Services incorporated, Guangzhou 510300) Abstract It's very powerf ...
- mysql-proxy中的admin-lua-script
[root@ecs-7b55 lua]# cat admin.lua --[[ $%BEGINLICENSE%$ Copyright (c) 2008, 2012, Oracle and/or its ...
- webapi从入门到放弃(一)OWIN 自寄宿模式
1.创建web空项目 2.创建完如图 3.安装如下程序包Microsoft.AspNet.WebApi.Core (5.2.4)Microsoft.Owin.Host.SystemWeb (4.0. ...
- Mongodb3.6 基操命令(二)——如何使用help
前言 在上一篇文章Mongodb3.6 快速入门(一)中,我们主要使用两个命令: 1.mongod #启动服务 2.mongo #连接mongodb 对于刚接触mongo的人来说,该怎么给命令传递参数 ...
- javascript预览图片——IT轮子系列(九)
再使用htm控件 <input type="file" name="file" /> 上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上 ...
- Mybatis解决jdbc编程的问题
1.1.1 Mybatis解决jdbc编程的问题 1. 数据库链接创建.释放频繁造成系统资源浪费从而影响系统性能,如果使用数据库链接池可解决此问题. 解决:在SqlMapConfig.xml中配置 ...
- maven技术(一)软件安装与配置
maven技术在研发的过程中,作为资源依赖管理非常出色,例如在Java项目开发过程中,需要各种各样jar包,一般情况下开发者会直接将所用到的jar包放在project的lib目录下,提供自己程序调用. ...