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 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
js文字横向滚动特效
Nov 11 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 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
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
javascript 一些用法小结
2009/09/11 Javascript
js 编写规范
2010/03/03 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python实现Restful API的例子
2019/08/31 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
技校个人求职信范文
2014/01/25 职场文书
高三政治教学反思
2014/02/06 职场文书
企业文化口号
2014/06/12 职场文书
给客户的检讨书
2014/12/21 职场文书
庆元旦主持词
2015/07/06 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL