前端杂货铺Web前端之路

7. js基础--方法

2017-03-14  本文已影响19人  梦见君笑

1.方法

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

2.this的使用

1.在一个  方法   的内部,this是一个特殊的变量,他始终指向当前对象

var xiaoming = {
    name: 'xiaoming',
    birth:1994,
    age:function(){
            var now = new Date().getFullYear();
            console.log(this);   // this 是当前对象
            return now - this.birth;
    }
};
xiaoming.age();    //23

2.在一个 函数  的内部调用this,this的指向视情况而定。

var getAge = function(){
    var now = new Date().getFullYear();
    console.log(this);
    return now - this.birth;
}
var xiaoming = {
    name: "xiaoming",
    birth:1994,
    age: getAge
}
xiaoming.age(); //23    此时this 指向当前对象
getAge(); // NaN          此时this 指向window
var fn = xiaoming.age;
fn();        //NaN            此时this 指向window

ECMA决定,在 ‘use strict’模式下,让函数的this 指向undefined,所以上面的例子在‘use strict’模式下会得到一个错误。这个决定只是让错误及时暴露出来

Uncaught TypeError: Cannot read property 'birth' of undefined

3.this在函数内部定义的函数中指向undefined,(在非strict模式下指向window)

'use strict'
var xiaoming = {
    name: 'xiaoming',
    birth: 1994,
    age: function(){
            function getAgeFromBirth(){
            var now = new Date().getFullYear(); 
            console.log(this);     //undefined
            return now - this.birth;
          }
    return getAgeFromBirth();
    }
};
xiaoming.age();        //undefined

####修复方法:用一个that 变量首先捕获this

var that = this 

3.apply

在一个独立的函数调用中,根据是否是strict模式,this指向undefined或window,不过仍然可以控制this的指向。

apply():接受两个参数,第一个参数是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。

function getAge(){
    var y = new Date().getFullYear();
    return y - this.birth;
}
var xiaoming = {
   name:'xiaoming',
   birth: 1994,
   age: getAge
};
xiaoming.age();  // 23
getAge.apply(xiaoming,[ ]);  // 23     this 指向当前对象,参数为空

call()与apply()的区别:

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

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

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

Maht.max.call(null,1,2,3,4);

4装饰器(Decorator) -- -不懂

装饰器用于给对象在运行期间动态的增加某个功能,职责等。相较于通过继承的方式扩充对象的功能,装饰器更加灵活。首先,我们可以动态的给某个对象选定某个装饰器,而不用hardcore继承对象来实现某个功能点。其次,继承的方式可能会导致子类繁多,仅仅为了增加某一个单一的功能点,显得有些多余。

var count = 0;
var oldParseInt = parseInt; // 保存原函数
window.parseInt = function () {
count += 1;
return oldParseInt.apply(null, arguments); // 调用原函数
};
// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
console.log(count); // 3

上一篇下一篇

猜你喜欢

热点阅读