zoukankan      html  css  js  c++  java
  • 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();//25
        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]);//5
       Math.max.call(null,3,5,4);//5

    对普通函数调用,我们通常把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;//3
  • 相关阅读:
    @slf4j 使用方法
    spark入门简单介绍
    spring boot 的简单实用和spring cloud 概念
    nginx与Tomcat
    python27+百度文字识别api
    python27+opencv2.4.10+pytesseract0.2.0图片识别
    学习vue的核心功能
    使用vscode +vue的初始环境搭建
    excel的vlookup,第一次用
    pyautogui键盘鼠标控制,python27
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7644412.html
Copyright © 2011-2022 走看看