跟我学习javascript的函数调用和构造函数调用


Posted in Javascript onNovember 16, 2015

一、函数调用
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"

二、方法的调用

而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。

三、构造函数的调用

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普及同时你指定了要使用严格模式,否则还是可以用的发散下思维。

以上就是本文的全部内容,希望对大家学习函数调用、方法调用和构造函数调用有所帮助。

Javascript 相关文章推荐
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 #Javascript
跟我学习javascript的函数和函数表达式
Nov 16 #Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 #Javascript
uploadify多文件上传参数设置技巧
Nov 16 #Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 #Javascript
跟我学习javascript的全局变量
Nov 16 #Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 #Javascript
You might like
自己前几天写的无限分类类
2007/02/14 PHP
php email邮箱正则
2008/10/08 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
jquery一般方法介绍 入门参考
2011/06/21 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
python中__call__方法示例分析
2014/10/11 Python
Python实现建立SSH连接的方法
2015/06/03 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
物流管理专业应届生求职信
2013/11/21 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
自我检讨报告
2015/01/28 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
frg-100简单操作(设置)说明
2022/04/05 无线电