函数的调用模式-学习笔记开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情函

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

1.函数的四种调用模式

-->函数模式 :一般独立函数调用

-->方法模式 : 作为方法调用..一定有一个引导对象(宿主对象)

-->构造器调用 :一定用来初始化对象..有new 引导..return可以重定向

-->上下文调用 : apple 或 call..第一个参数决定 this 的含义 ..借用方法

2.函数调用模式

->函数的定义方式

1>声明式

2>表达式式

3>Function

->单独独立调用的就是函数

函数名( 参数 )

->this 表示全局对象

->任何自调用函数都是函数模式

3.方法调用 模式 method {常称静态方法

->区分

方法本身就是函数,但是方法不是单独独立的调用,而是通过一个对象引导调用.

对象.方法( 参数 )

->this 表示引导方法的对象

------方法调用一定要有宿主对象

------方法一定是某个对象的方法. 对象可以是任何对象

function foo(){
console.log( this );
}
var o ={name:'jim'};
o.foo = foo;
foo(); //函数调用
o.foo(); //方法调用 ---------------------------------------
function func(){
console.log( ' 函数也是对象');
}
func.foo = foo;
foo(); //函数调用
func.foo(); //方法调用
---------------------------------------
var arr = [1,2,3];
arr.foo = foo;
arr.foo();

*4.面试题

var length = 10;
function fn () {
console.log(this.length);
}
var obj = {
length:5,
method:function( fn ){
fn();
arguments[ 0 ]();
}
};
obj.method( fn,1 );

----arguments 特殊对象,无需明确指出参数名,便可访问

5.构造器模式(构造函数模式,构造方法模式)

constructor

->区分 new

->执行步骤

var p = new Person ( );

new 是运算符,用来申请创建对象 ,创建出来的对象传递给构造函数的 this

利用构造函数对其初始化

function Person ( ) {

this.name = 'jim',

this.age =19;

this.gender = 'male';

}

->返回值

若不写return,那么构造函数默认返回 this

若在构造函数中写return,并紧跟基本类型( return num, return 123) .则忽略返回类型

若在构造函数中写return,并紧跟引用类型,那么构造函数返回该引用类型数据,忽略this

->调用构造函数时,无参可省括号

------构造函数结合性小结

1)构造函数无参数,可省括号

var p = new Person;

2)创建对象并直接调用其方法

( new Person ( ) ).sayHello( )

->可省略调整结合性的括号

new Person ( ).sayhello ( )

->若省略构造函数的括号,就必须加结合性的括号

( new Person).sayHello ( )

**6.上下文调用模式 **

[[统一一种格式,可以实现函数模式与方法模式

环境调用模式=>在不同环境下的不同调用模式

->语法(区分)

1> call 形式

函数名.call( ... )

2> apply 形式

函数名.apply( ... )

->用法

上下文调用目的..为了实现借用方法

function foo ( ) {
console.log( this );
}
var o = { name: 'jim' };
foo( );
o.func = foo ;
o .func( ) ;

// 函数以函数的形式调用

foo.apply ( null ) 或 foo.apply( )

//希望其是方法调用模式,需提供一个宿主对象

foo.apply ( o )

->带有参数的函数如何实现上下文调用

function foo ( num1 ,num2){
console.log( this );
return num1 + num2;
}
//函数调用模式
var res1 = foo( 123,567 );
//方法调用
var o = { name:' jim '};
o.func = foo;
var res2 = o.func ( 123 ,567 );

->使用 apply 进行调用,

如果函数是带有参数的 .apply 的第一个参数是 null 或对象

-是 null 就是函数调用

-是对象就是方法对象,该对象就是宿主对象,后紧跟一个数组参数,将函数的参数一次放在数组中

例如:
函数模式 foo (123 ,567 );
apply foo.apply( null, [123 ,567] )
有一个函数调用:func( '张三',19,'男' ),
将其修改成 apply 模式: func.apply (null,['张三',19,'男'] )
方法模式 :o.func( 123,567 )
apply :foo.apply( o, [123 ,567])

**7.call 调用 ** [[apply 调用时,函数参数须以数组形式存在,SO 引入call调用

--> call 调用与 apply 完全相同...[ 除参数不需要使用数组

foo( 123 ,567 )
foo.apply(null,[123,567] );
foo.call(null,123,567);

8.借用构造方法实现继承

function Person ( name ,age ,gender ){
this.name = name;
this.age = age;
this.gender = gender;
}
function Student (name,age, gender, coure){
Person.call (this ,name,age, gender);
this.course = course;
}
var p = new Student ('jim',19,'male','前端');

其他

1. 函数的bind (绑定)方法

让函数绑定对象的一种用法

函数本身是可调用,若要作为方法调用,须传入宿主对象,且使用call 或apply形式

但bind 使函数与某一个对象绑定起来,那么调用函数的时候,就好像是该对象在调用方法

->语法

函数.bind ( 对象 )

[返回一个函数 foo ,那么调用返回的函数 foo ,就好像对象在调用该方法一样

2.Object.prototype 的成员

1) constructor

2) hasOwnProperty 判断该属性是否为自己提供

3) propertyIsEnumerable 判断属性是否可以枚举

4) isPrototypeOf 判断是否为原型对象

5) toString, toLocalestring, valueOf

3.包装对象

字符串 string 是基本类型,理论上不应该包含方法

charAt , subStr ,slice ,...

三个基本类型对应的对象类型

Number String Boolean

基本数据类型没有方法,需要时自动的将基本类型转换成对象类型

"abc".charAt( 1 )

"abc" -> new String( "abc" )

s.charAt( 1 ) 返回结果

s 就被销毁

当基本类型. 方法的时候 , 解析器首先将基本类型转换成对应的对象类型,然后调用方法.方法执行结束后,这个对象就立刻回收

--在 apply 和 call 调用的时候,也会转换

--上下文调用的第一个参数必须是对象,若传递的是数字会自动转化成对应的包装类型

4.getter 与 setter 的语法糖

语法糖: 方便开发给出的语法结构

var o = (function () {
var num = 123;
return {
get_num: function () {
return num;
},
set_num: function ( v ) {
num = v;
}
};
})();
// 获得数据
o.get_num(); => o.num 形式
// 设置
o.set_num( 456 ); => o.num = 456 形式
var o = (function () {
var num = 123;
return {
// get 名字 () { 逻辑体 }
get num () {
return num;
}
// set 名字 ( v ) { 逻辑体 }
set num ( v ) {
num = v;
}
};
})();

5. ES5 中引入的部分数组方法

1> forEach 遍历

var arr = ['hello','js',{ },function(){ } ];
//遍历数组
arr.forEach(function(v,i){
console.log(i +'==='+v);
});

2> map 映射

语法: 数组.map( fn )

3> filter 筛选

语法: 数组.filter ( function ( v,i ){ }

4> some 判断数组中至少有一个数据,符合要求就返回true,否则返回false

5> every 满足所有元素都符合要求才返回true

6> indexOf 索引

7> lastIndexOf 从右往左找