对象方法表示

//直接表示方法
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

//方法单独提取出来
function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

对象方法返回

//代码示例
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};


//返回方法本身
xiaoming.age; //function xiaoming.age()

//返回方法的返回值
xiaoming.age(); //27

js中this的用法

//js代码总结
1 在非strict模式中,第二层函数中的this指向的是window,结果是报NaN
2 在strict模式中,第二层函数中的this指向的是undefined,结果是直接报错
3 在非strict模式和strict模式中,均要使用obj.xxx()的方式才能使得第一层的函数指向obj
4 在非strict模式中,进行函数赋值,再进行函数调用,报NaN结果,
5 在strict模式中,进行函数赋值,再进行调用,直接报错TypeError: Cannot read property 'birth' of undefined
//示例代码
function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); //27, 这里的this代表是是xiaoming
getAge(); //NaN; 这里的this代表是window, window不存在birth这个属性
//函数中包含函数的情况,对象调用第一层函数,第一层函数中的this代表obj,第二层函数中的this代表window

//第一层函数代表obj,而且必须是obj.xxx();形式
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
xiaoming.age(); //27
var fn = xiaomng.age;
fn(); //NaN; 说明必须使用obj.xxx()形式;

//第二层函数代表window
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // NaN, 因为在第二层函数中,this指向的是window, window不存在birth这个属性
//上面是js的设计错误,为了规避这个问题,引入‘use strict’,第二层函数出现this时候直接报错,this指向undefined
'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方法的修复,使用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(); // 27
//在非strict模式中,进行函数赋值,再进行函数调用,报NaN结果
//在strict模式中,进行函数赋值,再进行调用,直接报错TypeError: Cannot read property 'birth' of undefined
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
var demo = xiaoming.age;
var result = demo();
console.log(result); //NaN

'use strict';
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
var demo = xiaoming.age;
var result = demo();
console.log(result); //TypeError: Cannot read property 'birth' of undefined

apply方法指定this指定的对象

//使用apply方法指定函数中this的对象,其中第一个参数为this指定的对象,第二个参数为函数的参数
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方法实现装饰器功能

//装饰器模式:不改变对象结构的同时,为对象添加新的功能,下面通过apply方法实现装饰器功能

//统计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

this用法的补充说明

//当函数的作为对象的方法被调用而不是做为函数被调用时候,其this指向的是obj,当作为函数被调用时候,this指向为window
//一般情况下,匿名函数被返回是作为函数被调用,因此里面的this指代的是window

//示例代码1
  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;  //返回的匿名函数是作为函数被调用,this指向的是window
      };
    }
  };
  alert(object.getNameFunc()()); //The Window

//示例代码2
  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      var that = this;  //getNameFunc是作为方法被调用,this指向是obj
      return function(){
        return that.name;
      };
    }
  };
  alert(object.getNameFunc()());  //My Object

results matching ""

    No results matching ""