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 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
js实现登录与注册界面
Nov 01 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
js Math数学简单使用操作示例
Mar 13 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实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
进一步探究Python的装饰器的运用
2015/05/05 Python
python友情链接检查方法
2015/07/08 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python查询mysql,返回json的实例
2018/03/26 Python
python实现俄罗斯方块
2018/06/26 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Django实现跨域请求过程详解
2019/07/25 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
小学数学课题方案
2014/06/15 职场文书
出生医学证明书
2014/09/15 职场文书
专家推荐信怎么写
2015/03/25 职场文书
综合办公室岗位职责
2015/04/11 职场文书
《小小的船》教学反思
2016/02/18 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python