JavaScript函数的方法
在一个对象中绑定函数,称为这个对象的方法。
在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函数的方法的更多相关文章
- JavaScript 函数定义方法
JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立 ...
- JavaScript 函数(方法)
1 定义 1.1 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 语法: 函数就是包裹在大括号中的代码块,前面使用了关键词 function function 方法名(参数列表){ 代码 ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- web前端面试第一次[javascript函数和方法的区别]
//函数 function f1(){ console.log("我是函数"); } //调用函数 f1(); //创建一个空对象 var obj = {} //把函数定义到对象里 ...
- javascript 函数节流方法
函数节流可以缓解调用的次数,代码如下: function throttle(method,delay){ var timer=null; return function(){ var context= ...
- javascript 函数重载 overloading
函数重载 https://en.wikipedia.org/wiki/Function_overloading In some programming languages, function over ...
- 5种 JavaScript 调用函数的方法
一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性 ...
- JavaScript调用函数的方法
摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正 ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
随机推荐
- 九度oj题目1521:二叉树的镜像
题目1521:二叉树的镜像 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:2061 解决:560 题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF ...
- 在NuoDB上运行Asterisk
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文来自云+社区翻译社,作者Hans362 您可能已经熟悉Asterisk,一个广泛部署的开源Telephony框架.如果你不太熟悉,你应该 ...
- github不支持tlsv1.1后, 出现SSL connect error
过完年回来, github不安分了, 发了博文说不支持TLSv1/TLSv1.1: Weak cryptographic standards removed, 没看到这篇博文之前, 还以为是代理问题, ...
- 吴恩达《Machine Learning Yearning》总结(21-30章)
21.偏差和方差举例 前提:对于人类而言,可以达到近乎完美的表现(即人类去做分类是误差可以接近0). (1)假设算法的表现如下:训练误差率:1%,开发误差率:11%:此时即为高方差(high vari ...
- bzoj 5308: [Zjoi2018]胖
Description Cedyks是九条可怜的好朋友(可能这场比赛公开以后就不是了),也是这题的主人公. Cedyks是一个富有的男孩子.他住在著名的ThePLace(宫殿)中. Cedyks是一个 ...
- springboot 整合kafka
本文介绍如何在springboot项目中集成kafka收发message. 1.先解决依赖 springboot相关的依赖我们就不提了,和kafka相关的只依赖一个spring-kafka集成包 &l ...
- SQL Server迭代求和
drop table t_geovindu create table t_geovindu ( xid int IDENTITY (1, 1), price money, DebitCredit VA ...
- 【转载】Navicat Premium 12安装与激活
原文地址 https://www.jianshu.com/p/5f693b4c9468#comment-20147185感谢作者的无私奉献,无意侵权,如需删除请联系我!所提供的激活文件理论支持Navi ...
- log4.j
导入第三方jar包 第一步:右击工程名,新建一个文件夹(Fold),名字为lib. 第二步:把第三方jar包复制到lib目录下. 第三步:右击工程名---->properties ----> ...
- hook_myhook.api.php文件什么用
看源文件的时候发现有个user.api.php文件,里面定义了一个新的钩子,$hook_user_categories,但是,drupal核心里面没有,我推测是自定义 的钩子函数,然后在*.modul ...