JavaScript方法_动力节点Java学院整理


Posted in Javascript onJune 28, 2017

在一个对象中绑定函数,称为这个对象的方法。

在JavaScript中,对象的定义是这样的:

var xiaoming = {
 name: '小明',
 birth: 1990
};

但是,如果我们给xiaoming绑定一个函数,就可以做更多的事情。比如,写个age()方法,返回xiaoming的年龄:

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: function () {
  var y = new Date().getFullYear();
  return y - this.birth;
 }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了

绑定到对象上的函数称为方法,和普通函数也没啥区别,但是它在内部使用了一个this关键字,这个东东是什么?

在一个方法内部,this是一个特殊变量,它始终指向当前对象,也就是xiaoming这个变量。所以, this.birth可以拿到xiaomingbirth属性。

让我们拆开写:

function getAge() {
 var y = new Date().getFullYear();
 return y - this.birth;
}

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: getAge
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN

单独调用函数getAge()怎么返回了NaN?请注意,我们已经进入到了JavaScript的一个大坑里。

JavaScript的函数内部如果调用了this,那么这个this到底指向谁?

答案是,视情况而定!

如果以对象的方法形式调用,比如xiaoming.age(),该函数的this指向被调用的对象,也就是xiaoming,这是符合我们预期的。

如果单独调用函数,比如getAge() ,此时,该函数的this指向全局对象,也就是window

坑爹啊!

更坑爹的是,如果这么写:

var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN

也是不行的!要保证this指向正确,必须用obj.xxx()的形式调用!

由于这是一个巨大的设计错误,要想纠正可没那么简单。ECMA决定,在strict模式下让函数的this指向undefined,因此,在strict模式下,你会得到一个错误:

'use strict';

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: function () {
  var y = new Date().getFullYear();
  return y - this.birth;
 }
};

var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来,并没有解决this应该指向的正确位置。

有些时候,喜欢重构的你把方法重构了一下:

'use strict';

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: function () {
  function getAgeFromBirth() {
   var y = new Date().getFullYear();
   return y - this.birth;
  }
  return getAgeFromBirth();
 }
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了!原因是this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了!(在非strict模式下,它重新指向全局对象window!)

修复的办法也不是没有,我们用一个that变量首先捕获this

'use strict';

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: function () {
  var that = this; // 在方法内部一开始就捕获this
  function getAgeFromBirth() {
   var y = new Date().getFullYear();
   return y - that.birth; // 用that而不是this
  }
  return getAgeFromBirth();
 }
};

xiaoming.age(); // 25

var that = this;,你就可以放心地在方法内部定义其他函数,而不是把所有语句都堆到一个方法中。

apply

虽然在一个独立的函数调用中,根据是否是strict模式,this指向undefinedwindow,不过,我们还是可以控制this的指向的!

要指定函数的this指向哪个对象,可以用函数本身的apply方法,它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。

apply修复getAge()调用:

function getAge() {
 var y = new Date().getFullYear();
 return y - this.birth;
}

var xiaoming = {
 name: '小明',
 birth: 1990,
 age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

另一个与apply()类似的方法是call() ,唯一区别是:

  1. apply()把参数打包成Array再传入;
  2. call()把参数按顺序传入。

比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下:

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

对普通函数调用,我们通常把this绑定为null。

装饰器

利用apply() ,我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的,即使内置的函数,我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt() ,可以把所有的调用都找出来,然后手动加上count += 1,不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt():

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
 count += 1;
 return oldParseInt.apply(null, arguments); // 调用原函数
};

// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3

Javascript 相关文章推荐
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 #Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 #Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 #Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 #Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
You might like
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
采购文员岗位职责
2013/11/20 职场文书
护士求职信
2014/07/05 职场文书
七一表彰大会简报
2015/07/20 职场文书
新人入职感言
2015/07/31 职场文书