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

在JavaScript中,对象的定义是:

  1.   var xiaoming = {
  2. name:'小明';
  3. birth:1990;
  4. };

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

  1.   var xiaoming = {
  2. name:'小明',
  3. birth:1990,
  4. age:function () {
  5. var y = new Date().getFullYear();
  6. return y - this.birth;
  7. }
  8. };
  9. xiaoming.age;//function xiaoming.age()
  10. xiaoming.age();//今年调用是27

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

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

如果我们拆开来写:

  1. function getAge() {
  2. var y = new Date().getFullYear();
  3. return y - this.birth;
  4. }
  5. var xiaoming = {
  6. name:'小明',
  7. birth:1990,
  8. age:getAge
  9. };
  10. xiaoming.age();//25,正常结果
  11. getAge();//NaN

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

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

答案是,视情况而定。

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

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

apply

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

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

用apply修复getAge()调用:

  1. function getAge() {
  2. var y = new Date().getFullYear();
  3. return y - this.birth;
  4. }
  5.  
  6. var xiaoming = {
  7. name:'小明',
  8. birth:1990,
  9. age:getAge
  10. };
  11.  
  12. xiaoming.age();//
  13. getAge.apply(xiaoming,[]);//25,this指向xiaoming,参数为空

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

apply()把参数打包成Array再传入;

call()把参数按顺序传入。

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

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

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

装饰器

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

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

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

  1.   var count = 0 ;
  2. var oldParseInt = function (){
  3. count += 1 ;
  4. return oldParseInt.apply(null,arguments);//使用原函数
  5. };
  6.  
  7. //测试
  8. parseInt('10');
  9. parseInt('20');
  10. parseInt('30');
  11. count;//

JavaScript函数的方法的更多相关文章

  1. JavaScript 函数定义方法

    JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立 ...

  2. JavaScript 函数(方法)

    1 定义 1.1 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 语法: 函数就是包裹在大括号中的代码块,前面使用了关键词 function function 方法名(参数列表){ 代码 ...

  3. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  4. web前端面试第一次[javascript函数和方法的区别]

    //函数 function f1(){ console.log("我是函数"); } //调用函数 f1(); //创建一个空对象 var obj = {} //把函数定义到对象里 ...

  5. javascript 函数节流方法

    函数节流可以缓解调用的次数,代码如下: function throttle(method,delay){ var timer=null; return function(){ var context= ...

  6. javascript 函数重载 overloading

    函数重载 https://en.wikipedia.org/wiki/Function_overloading In some programming languages, function over ...

  7. 5种 JavaScript 调用函数的方法

    一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性 ...

  8. JavaScript调用函数的方法

    摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正 ...

  9. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

随机推荐

  1. 九度oj题目1521:二叉树的镜像

    题目1521:二叉树的镜像 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2061 解决:560 题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF ...

  2. 在NuoDB上运行Asterisk

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文来自云+社区翻译社,作者Hans362 您可能已经熟悉Asterisk,一个广泛部署的开源Telephony框架.如果你不太熟悉,你应该 ...

  3. github不支持tlsv1.1后, 出现SSL connect error

    过完年回来, github不安分了, 发了博文说不支持TLSv1/TLSv1.1: Weak cryptographic standards removed, 没看到这篇博文之前, 还以为是代理问题, ...

  4. 吴恩达《Machine Learning Yearning》总结(21-30章)

    21.偏差和方差举例 前提:对于人类而言,可以达到近乎完美的表现(即人类去做分类是误差可以接近0). (1)假设算法的表现如下:训练误差率:1%,开发误差率:11%:此时即为高方差(high vari ...

  5. bzoj 5308: [Zjoi2018]胖

    Description Cedyks是九条可怜的好朋友(可能这场比赛公开以后就不是了),也是这题的主人公. Cedyks是一个富有的男孩子.他住在著名的ThePLace(宫殿)中. Cedyks是一个 ...

  6. springboot 整合kafka

    本文介绍如何在springboot项目中集成kafka收发message. 1.先解决依赖 springboot相关的依赖我们就不提了,和kafka相关的只依赖一个spring-kafka集成包 &l ...

  7. SQL Server迭代求和

    drop table t_geovindu create table t_geovindu ( xid int IDENTITY (1, 1), price money, DebitCredit VA ...

  8. 【转载】Navicat Premium 12安装与激活

    原文地址 https://www.jianshu.com/p/5f693b4c9468#comment-20147185感谢作者的无私奉献,无意侵权,如需删除请联系我!所提供的激活文件理论支持Navi ...

  9. log4.j

    导入第三方jar包 第一步:右击工程名,新建一个文件夹(Fold),名字为lib. 第二步:把第三方jar包复制到lib目录下. 第三步:右击工程名---->properties ----> ...

  10. hook_myhook.api.php文件什么用

    看源文件的时候发现有个user.api.php文件,里面定义了一个新的钩子,$hook_user_categories,但是,drupal核心里面没有,我推测是自定义 的钩子函数,然后在*.modul ...