跟我学习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读取ASP设定的COOKIE
Nov 24 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
javascript实现弹出层效果
Dec 10 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
php cout<<的一点看法
2010/01/24 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS中的phototype详解
2017/02/04 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
长青弘远的面试题
2012/06/09 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
大学专科求职信
2014/07/02 职场文书
公司员工辞职信范文
2015/05/12 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android