您的当前位置:首页正文

javascript函数定义、调用模式及this的初始化实例详解

2020-11-27 来源:小奈知识网

函数定义

函数包含一组语句,它们是javascript的基础模块单元,用于代码复用、信息隐藏和组合调用。函数用于指定对象的行为

函数的四种调用模式及this的初始化

第一种:方法调用模式
以下事例证明通过方法调用模式调用时,this绑定到拥有该方法的对象。如:

var person = {
 name: "defaultName",
 setName : function(name){
 this.name = name;
 }
};
person.setName("zhangsan");
alert(person.name);

第二种:函数调用模式
以下事例证明通过函数调用模式调用时,this绑定到全局对象上。如:

var test = add(value1, value2);
var name = "defaultName";
var person = {
 name: "zhangsan", // person中定义的name
 getName : function(){
 // 通过此方法可以将test函数的this改变为person的this对象
 var that = this; // 解决方案
 // getName中定义的name
 var name = "lisi";
 var test = function(){
 // 通过that来访问person中的对象
 // this指向Global对象
 // this.name = defaultName
 // that.name = zhangsan
 alert([this.name, that.name]);
 };
 test(); // 函数调用模式
 }
}
person.getName();

第三种:构造器调用模式

// 定义一个Person的构造器,在调用时一定要用new调用
var Person = function(name){
 this.name = name;
}
// 添加一个方法到Person
Person.prototype.getName = function(){
 return this.name;
};
// 构造一个Person对象
var person = new Person("zhangsan");
alert(person.getName()); // 调用getName获取person对象中name属性的值

第四种:Apply调用模式

<script type="text/javascript">
 // 定一个累加方法。如sum(1,2,3,4...)
 // 该方法位于window执行环境中。
 var displayName = function(){
 alert("sum的执行环境: " + typeof(this));
 alert("Name: " + this.name); // 取出当前执行环境中name属性
 }
 // 定一个Person对象
 var Person = {
 name: "zhangsan"
 };
 displayName.apply(Person);
</script>

Apply和call的区别

// 定一个对象,包含一个add方法,返回a、b的和
var Person = {
 'add' : function(a, b){
 return a + b;
 }
};
// 显示a、b的和
function showInfo(a, b){
 alert(this.add(a, b));
}
// 通过apply方法改变showInfo方法的this指向
//showInfo(1, 3); // 对象不支持次对象
showInfo.apply(Person, [1, 3]);
showInfo.call(Person, 1, 3);
// 从上面可以看出,apply和call的区别是apply接受一个数组作为被调函数的参数,
// 而call是通过将被调函数的所有参数以逗号分隔的形式展开
显示全文