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

在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();//今年调用是27

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

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

如果我们拆开来写:

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。

apply

虽然在一个独立的函数调用中,根据是否是stric模式,this指向undefined或者window,不过,我们还是可以控制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();//
getAge.apply(xiaoming,[]);//25,this指向xiaoming,参数为空

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

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

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

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

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

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

装饰器

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

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

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

  var count = 0 ;
var oldParseInt = function (){
count += 1 ;
return oldParseInt.apply(null,arguments);//使用原函数
}; //测试
parseInt('10');
parseInt('20');
parseInt('30');
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. js 中移动元素的方法

    2017-12-13 19:59:24 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. tomcat和应用集成

    将tomcat作为应用的一部分集成到应用中,使得应用可以直接开启http服务,对外提供接口.此时应用程序不必再遵守j2ee中的文件目录格式要求. 此种方式改变了以往先部署tomcat容器,再按照j2e ...

  3. Remove a Submodule within git

    For many git-based projects, submodules are useful in avoiding duplicate work and easing utility lib ...

  4. 微软的深度学习框架cntk ,我目前见过 安装方式最简单的一个框架,2.0之后开始支持C# 咯

    wiki:https://github.com/Microsoft/CNTK/wiki 嗨,你也是我这种手残党么?之前试着安装着mxnet和tensorflow,但是因为时间比较短所以往往来不及安装完 ...

  5. Java程序员应该知道的linux命令

    1.查看Java进程:ps -ef|grep java,ps auxf|grep jva; 2.杀死所有Java进程: pkill java, kill -9 进程ID: 3.进入目录:cd /usr ...

  6. flex布局帮助你快速实现布局

    flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个 ...

  7. ArcEngine开发鹰眼实现问题

    在网上百度一下有关AE鹰眼实现的代码,基本是一样的,可问题是好多代码自己运行起来鹰眼却总是加不进地图.住视图axMapControl1.OnMapReplaced(),axMapControl1.On ...

  8. io饥饿

    看书,在书上看到一句话,防止io饥饿,google了一下,也没有找到相关的解释,究竟什么是io饥饿.

  9. 【NLP_Stanford课堂】正则表达式

    或者 [Ww]oods,方括号里的是或的关系,符合其一即被提出.用来匹配单个字符 [A-Z]:表示所有的大写字母之一 [a-z]:表示所有的小写字母之一 [0-9]:表示所有的0-9的数字之一 否定: ...

  10. March 15 2017 Week 11 Wednesday

    The starting point of all achievements is desire. 成功的第一步是渴望. Only you desire for somethings, you can ...