个性化阅读
专注于IT技术分析

JavaScript对象方法及this用法详解

JavaScript函数中,如果定义一个函数A,而这个函数又包含着另外一个函数B,这时候我们调用这个函数A的时候该函数并不会执行它所包含的函数B,而是需要我们在函数A内调用。

例如:

function add(){
var i = 1;
console.log(i);//输出:1
var myfun = function(){
console.log('函数B');//输出:函数B
}
myfun();//调用最外层函数的时候,才会调用到内部函数
}

add();//调用最外层函数

以上是在函数内部定义的一个函数方法,如果在对象中定义函数方法被称为对象方法。那么在对象中,怎么定义函数方法呢,由该怎么调用呢?

js对象方法

一、定义函数方法

在对象中,我们可以把函数名作为对象的属性,调用方法就等于访问对象的属性那样,如下面的例子。可是为什么要写成age(),而不是age呢?因为后面跟括号()才是对象方法,否则就是一个简单的对象属性。

例如:

var person = {
name:'mm',
birth:2010,
age: function () {//定义对象方法
var y = new Date().getFullYear();
return y - this.birth;
}
}

console.log(person.name)//访问属性name,输出:mm
console.log(person.age());//访问对象方法,执行函数age,输出:9
console.log(person.age)//访问到age属性,不过age不是方法,所以打印出来整个函数

二、函数this用法

也许大家也注意到了上述例子中对象方法内的this,this这个关键字在JavaScript中表示的是什么?在这个例子中又表示着什么?在JavaScript中,this关键字只指向当前对象的父对象。所以在上述例子中,this关键字指向的是person对象而不是age属性。所以单独使用this的时候,指向的是全局对象window。很多人说这个是JavaScript设计的坑,或者说是设计的缺陷,其实我并不认为是坑,因为this会随着环境的改变而改变,而不变的是它始终指向当前环境的父级对象。搞清楚这一点就可以灵活运用this关键字了,这一关键字是经常出现而且很好用的呢。

例如:

function getAge(){
var y = new Date().getFullYear();
return y - this.birth;
}

var person = {
name:'mm',
birth:2010,
age:getAge
}

console.log(person.age())//9
console.log(getAge())//NaN,因为this指向的是全局对象window

三、apply方法

除了可以像上面那样使用属性的方法调用一个对象外部的函数作为方法之外,还有一种方法,这是函数本身的apply方法。使用方法是带参的形式,第一个参数是需要绑定的对象,第二个参数是函数本身的参数,以数组的形式出现。

语法如下,理解为A对象应用B对象的方法。

B.apply(A, arguments)

例如:

function getAge(){
var y = new Date().getFullYear();
return y - this.birth;
}

var person = {
name:'mm',
birth:2010,
age:getAge
}

console.log(getAge.apply(person,[]))//输出9,理解为person对象应用getAge的方法

除此之外,还有一个类似于apply的方法,就是call( ),调用一个对象的一个方法,用另一个对象替换当前对象。

语法:

B.call(A, args1,args2);

不同之处是apply()是把参数以数组的形式放在第二个参数上,而call()是一个个按顺序传入,不是数组的形式。

赞(0)
未经允许不得转载:srcmini » JavaScript对象方法及this用法详解

评论 抢沙发

评论前必须登录!