js高级——函数的四种调用模式
2017-12-28 07:57
531 查看
1.函数模式:this指向的是window全局对象
function
test(){
}
test();
2.方法模式:this指向的是调用这个方法的对象
var
obj = {
test:function(){
}
};
obj.test();
3.构造函数模式:this指向的是使用new创建出来的对象
function
Person(){
}
var
obj =
new Person();
(1)构造函数调用模式的特征
·构造函数的首字母要大写
·一般情况下和new关键字一起使用
·构造函数中的this指向的是new关键字创建出来的对象
·默认返回new创建出来的这个对象,若是值类型的数据则没有影响;若是对象类型则返回这个对象,不会返回原来创建出来的对象
(2)工厂模式的构造函数
·简单工厂模式的构造函数创建出来的对象跟该构造函数无关
·简单工厂模式的构造函数实际的调用模式是函数模式
function
Person(name,age){
var
o = {
name:name,
age:age,
sayHello:function(){
}
};
return
o;
}
var
p =
new Person("张三",18);
console.log(p);
(3)寄生式构造函数
function
Person(name,age){
var
o = {
name:name,
age:age,
sayHello:function(){}
};
return
o;
}
var
p =
new Person();
4.上下文模式:其实就是一个执行环境,这里的执行环境指的就是this(如果是在全局环境下这个this指的就是window,执行环境就是window;如果是在一个对象的调用下去执行,this指的就是这个对象)
(1)在上下文调用模式中可以修改this的值(也就是可以修改函数的调用方式)
·apply:函数.apply(对象,[函数需要的参数列表,是一个数组]这里的[]表示的是可有可无的意思),用于函数的形参个数确定/不确定的情况
·call :函数.call(对象,[arg1],[arg1],[arg3]...[argn]这里的[]表示的也是可有可无的意思,不是数组),用于确定了函数的形参个数确定的情况
注意:
·apply和call的相同点
·第一个参数都是要把this修改成对象
·第一个参数传递null的时候都表示函数调用模式(也就是将this指向window)
·apply和call的不同点:当函数需要参数的时候,apply是用数组进行参数的传递,call是用单个的参数传递
(2)apply补充
var
obj = {
//伪数组
0:"abc",
1:"def",
2:"hig",
length:3
};
var
arr = [].concat.apply([],obj);
//把obj和[]空数组拼起来然后返回给arr
console.log(arr);
function
test(){
console.log(this);
}
test.apply(1);
test.apply("abc");
test.apply(true);
test.apply(window);
//当使用call、apply传入的第一个参数为值类型时会将值类型转换成对应的对象(也就是对应的引用类型),然后赋值给this
//的那个传入的第一个参数为null/undefined的时候会把this赋值为window
//借用构造函数实现继承
function
Person(){
this.name
= "张三";
this.age
= 18;
}
function
Student(){
Person.apply(this);
}
var
stu =
new Student();
console.log(stu);
//打印出来的就是张三、18
function
test(){
}
test();
2.方法模式:this指向的是调用这个方法的对象
var
obj = {
test:function(){
}
};
obj.test();
3.构造函数模式:this指向的是使用new创建出来的对象
function
Person(){
}
var
obj =
new Person();
(1)构造函数调用模式的特征
·构造函数的首字母要大写
·一般情况下和new关键字一起使用
·构造函数中的this指向的是new关键字创建出来的对象
·默认返回new创建出来的这个对象,若是值类型的数据则没有影响;若是对象类型则返回这个对象,不会返回原来创建出来的对象
(2)工厂模式的构造函数
·简单工厂模式的构造函数创建出来的对象跟该构造函数无关
·简单工厂模式的构造函数实际的调用模式是函数模式
function
Person(name,age){
var
o = {
name:name,
age:age,
sayHello:function(){
}
};
return
o;
}
var
p =
new Person("张三",18);
console.log(p);
(3)寄生式构造函数
function
Person(name,age){
var
o = {
name:name,
age:age,
sayHello:function(){}
};
return
o;
}
var
p =
new Person();
4.上下文模式:其实就是一个执行环境,这里的执行环境指的就是this(如果是在全局环境下这个this指的就是window,执行环境就是window;如果是在一个对象的调用下去执行,this指的就是这个对象)
(1)在上下文调用模式中可以修改this的值(也就是可以修改函数的调用方式)
·apply:函数.apply(对象,[函数需要的参数列表,是一个数组]这里的[]表示的是可有可无的意思),用于函数的形参个数确定/不确定的情况
·call :函数.call(对象,[arg1],[arg1],[arg3]...[argn]这里的[]表示的也是可有可无的意思,不是数组),用于确定了函数的形参个数确定的情况
注意:
·apply和call的相同点
·第一个参数都是要把this修改成对象
·第一个参数传递null的时候都表示函数调用模式(也就是将this指向window)
·apply和call的不同点:当函数需要参数的时候,apply是用数组进行参数的传递,call是用单个的参数传递
(2)apply补充
var
obj = {
//伪数组
0:"abc",
1:"def",
2:"hig",
length:3
};
var
arr = [].concat.apply([],obj);
//把obj和[]空数组拼起来然后返回给arr
console.log(arr);
function
test(){
console.log(this);
}
test.apply(1);
test.apply("abc");
test.apply(true);
test.apply(window);
//当使用call、apply传入的第一个参数为值类型时会将值类型转换成对应的对象(也就是对应的引用类型),然后赋值给this
//的那个传入的第一个参数为null/undefined的时候会把this赋值为window
//借用构造函数实现继承
function
Person(){
this.name
= "张三";
this.age
= 18;
}
function
Student(){
Person.apply(this);
}
var
stu =
new Student();
console.log(stu);
//打印出来的就是张三、18
相关文章推荐
- js 四种函数调用模式
- js高级_函数的四种调用形式
- JS 四种函数调用模式
- JS面向对象函数的四种调用模式
- JS函数四种调用模式
- js高级程序设计书中,有一句话在全局作用域中定义的函数实际上只 能被某个对象调用???
- 学习笔记-函数的四种调用模式
- 函数的四种调用模式
- javascript四种调用方式——方法调用模式、函数调用模式、构造器调用模式和Apply或Call调用模式
- javascript中四种函数调用模式及对this的不同绑定
- js 函数的调用模式
- js中call和apply(函数的上下文调用模式)详解
- js 函数的方法 函数调用模式 this => that arguments
- javascript的四种函数调用模式以及相应的this绑定
- 函数四种调用模式
- 【名师课堂】JavaScript高级之函数的四种调用形式
- Javascript的四种(函数)调用模式
- 6- js 函数的四种调用方式
- Javascript 函数的四种调用模式
- JavaScript高级之函数的四种调用形式