02.JavaScript 面向对象精要--函数
在JavaScript中,函数其实也是对象。是函数不同于其他对象的特点是:
函数存在一个被称为[[Call]]的内部属性。[[Call]]属性是函数独有的,
表明该对象可以被执行。ECMAScript 定义了typeof操作符对具有[[Call]]
属性的对象返回 "function"。理解函数的行为是理解JavaScript的核心。
一.函数声明式和表达式
1.1 函数声明
以function开头后面跟着函数的名字
function add(num1,num2){ return num1 + num2; }
JavaScript中能对函数声明进行提升,这是因为引擎提前知道了函数的
名字。而函数表达式仅能通过变量引用,因此无法提升。
1.2 函数表达式
function开头后面不需要加上函数名,这种函数称为匿名函数,而是被
一个变量引用。
var add = function(num1, num2){ return num1 + num2; };
1.3 函数声明和表达区别
add(5,5);//返回10 add2(10,10)//错误:add2 is not a function function add(num1,num2){ return num1 + num2; } var add2 = function(num1,num2){ return num1 + num2; }; add2(5,5)//返回10;
二.函数就是值
函数是JavaScript的一大重点,你可以像对象一样使用函数。
也可以将它们赋给变量,在对象中添加它们,将它们当成参数传递给
别的函数,或从别的函数中返回。基本上只要时可以使用其它引用值
的地方,就可以使用函数。
1 function sayHi(){ 2 console.log("Hi!"); 3 } 4 sayHi();//输出 "Hi!" 5 var sayHi2 = sayHi; 6 sayHi2();//输出 "Hi!" 7 //使用构造函数实现: 8 var sayHi = new Function("console.log(\"Hi!\");"); 9 sayHi();// "Hi!" 10 var sayHi2 = sayHi; 11 sayHi2();// "Hi!" 12 //把函数当成参数传递 13 var numbers = [1,5,8,4,7,10,2,6]; 14 numbers.sort(function(first,second){ 15 return first - second; 16 }) 17 console.log(numbers); //"[1,2,4,5,6,7,8,10]" 18 numbers.sort(); 19 console.log(numbers);// "[1,10,2,3,4,5,7,8]"
三.函数参数
JavaScript函数的另一个独特之处在于你可以给函数传递
任意数量的参数却不造成错误。那是因为函数参数实际上被保存在
一个 类数组arguments的对象中。arguments的length属性会告诉
你目前有多少个值。Array.isArray(arguments)永远返回false。
函数也是对象,所以也有属性,lenght属性返回函数 期望参数
个数。
3.1 arguments对象
1 function reflect(val){ 2 return val; 3 } 4 console.log(reflect("Hi!")); // "Hi!" 5 console.log(reflect("Hi!",25)); // "Hi!" 6 console.log(reflect.length); // "1" 7 8 reflect = function(){ 9 return arguments[0]; 10 } 11 console.log(reflect("Hi!")); // "Hi!" 12 console.log(reflect("Hi!",25)); // "Hi!" 13 console.log(reflect.length); // "0"
3.2 重载
JavaScript没有重载,但可以模拟重载。
利用传入的参数个数arguments.length来判断执行函数体。
function sayHi(msg){ if(argrments.length === 0){ msg = "default msg"; }else{ console.log(msg); } } sayHi('hello');// 输出 "hello"
四.对象方法
如果一个对象的属性是函数,则该函数被称为方法。
var person = { name : 'Nicholas', sayNmae : function(){ console.log(person.name); } }
4.1 this对熊
JavaScript 所有函数作用域内都有一个this对象代表调用
该函数的对象。在全局作用域中this代表全局对象(window).
当一个函数作为对象的方法被调用时,默认this的值等于那个
对象。
function say(){ console.log(this.name); } var person1 = { name : 'Nicholas', sayNmae : say } var person2 = { name : 'Greg', syaName : say } person1.sayName(); // "Nicholas" person2.sayName(); // "Greg"
4.2 改变this (call(),apply(),bind())
有3种函数方法允许你改变this的值。记住:函数也是对象
所以函数也有方法。
4.2.1 call(this的值,'参数1','参数2')方法
function say(label){ console.log(label + ":"+this.name); } var person1 = { name : 'Nicholas' }; var person2 = { name : 'Greg' }; var name = 'Micheel'; say.call(this,'global'); //输出 "global:Micheel" say.call(person1,'person1');//输出 "person1 : Micholas" say.call(person2,'person2');//输出 "person12 : Greg"
4.2.2 apply(this的值,['参数1','参数2'])方法
say.apply(this,['global']); //输出 "global:Micheel" say.apply(person1,['person1']);//输出 "person1 : Micholas" say.apply(person2,['person2']);//输出 "person12 : Greg"
4.2.3 bind()方法
var say1 = say.bind(person1); say1("person1"); //输出 "person1 : Micholas" var say2 = say.bind(person2,"person2"); say2(); // 输出 "person12 : Greg"