2018-03-26 JS 函数

1. 函数的声明方式

1.function a(a,b){
    return a+b;
}

2. var a = function(a,b){    //匿名函数,函数表达式
    return a+b;
}
a(1,2)    //3

3.var b = new Function(
    'a', //构造函数,    基本没人用
    'b',
    'return a+b'
);
b(1,2)    //3

var b = Function('a','b','return a+b')
b(1,2)    //3,加new和不加new没区别

var b = Function('return "hello world"');  
//若只有一个参数,则就是函数体

4.var e = (a,b) => {
    var m = a*2; 
    var n = b*2; 
    return m+n;
}

//若只有一句话,并且不返回对象,可以同时去掉return和{}
 var e = (a,b) => a+b

//若只有一个参数,可以省略()
 var e = n => n*n

2. 若重复声明函数,由于函数名的提升,前一次声明在任何时候都是无效的,这一点要特别注意。如下

function f() {
  console.log(1);
}
f() // 2

function f() {
  console.log(2);
}
f() // 2

函数的变量提升:

f();    //不会报错,因为下面的变量提升了

 function f() {}    
f();
var f = function (){};
// 报错,TypeError: undefined is not a function
// 因为上面这两行等同于下面
var f;
f();
f = function () {};

所以如果同时采用function命令和赋值语句声明同一个函数,最后总是采用赋值语句的定义。

var f = function () {
  console.log('1');
}

function f() {
  console.log('2');
}

f() // 1,相当于下面
 
var f;
function f() {
  console.log('2');
}
f = function () {
   console.log('1');
}
f();    //1

3. 注意:不要在if语句和try语句里使用函数声明

if (false) {
  function f() {}    //即使是false,f函数也会被声    明,因为函数名的提升
}

f() // 不报错,因为函数名提升,所以不要在if    语句里使用函数声明

//但可以使用函数表达式
if (false) {
  var f = function () {};
}

f() // undefined

4. 函数的属性

name

function f1() {}
f1.name    // "f1",name属性

var f2 = function(){};
f2.name    //f2

var f3 = function f4(){};
f3.name    //f4

var f5 = new Function('x','y','return x+y');
f5.name    //'anonymous',匿名的

length

function f(a, b) {}
f.length // 2,函数的参数个数

toString

function f(){
    console.log('可以的');
}
f.toString();    // "function f(){
                 //    console.log('可以的');                     //  }"
//利用这一点可以变相实现多行字符串
function f() {/*
  这是一个
  多行注释
*/}

f.toString()
// "function f(){/*
//   这是一个
//   多行注释    
// */}"

变相实现多行字符串

5. 局部变量

在函数内部声明的变量是局部变量,在函数以外声明的全是全局变量,在其他区块中声明的一律也是全局变量。

6. 函数内部也有变量提升!

7. 函数的作用域,就是其声明时所在的作用域,与其运行时所在的作用域无关。

var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1

8. 传递方式

var obj = { p: 1 };

function f(o) {
  o.p = 2;
}
f(obj);  //相当于把obj的地址传进去

obj.p // 2

如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

这是因为,o的值实际是参数obj的地址,重新对o赋值导致o指向另一个地址,保存在原地址上的值不受影响。复合类型是传地址

var p = 2;

function f(p) {
  p = 3;
}
f(p);  //基本类型,所以传进去的不是地址而只是p的值

p // 2

原始类型的值,传入函数只是值的拷贝,所以怎么修改都不会影响到原始值

9. arguments对象

可以通过argument对象获得参数

function f(a, a) {
  console.log(arguments[0]);
}

f(1) // 1

正常模式下,arguments对象还可以在运行时修改参数。严格模式下不行

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5

arguments.length //可以知道传入多少个参数

arguments不是数组,但可以转换为数组

10. 返回值

函数即使没有return,JS会自动加上return undefined;

11. function的不一致性

function y(){};
y;    //f y(){}
 
var x = function i(){};
i;    //Error: i is not defined,i只能作用在它自己的函数里

12. 函数的调用

f(1,2);
f.call(undefined,1,2);  //这两种调用方式等价

13. this和arguments

this是call()的第一个参数

f = function(){
    console.log(this);
}
f.call(undefined);    //正常模式下,若传入的是null或undefined,打印出来的就是window

f = function(){
    'use strict'
    console.log(this);
}
f.call(undefined);    //严格模式打印出undefined

面试题1:

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 打印出obj,因为转换为 obj.foo.call(obj),this 就是 obj
bar()   //打印出window,转换为 bar.call(),由于没有传东西,所以 this 就是 undefined,最后浏览器给你一个默认的 this —— window 对象

面试题2:

function fn (){ console.log(this) }
var arr = [fn, fn2]
arr[0]() // 这里面的 this 又是什么呢?

我们可以把 arr0 想象为arr.0( ),虽然后者的语法错了,但是形式与转换代码一样,于是:

arr.0.call(arr);
//this就是arr

arguments是伪数组

f = function(){
    console.log(arguments);
}
f.call(undefined,1,2,3);    //[1,2,3,......]

arguments有数组的一些特性,但没有在Array的原型链中,所以arguments没有数组的方法,如push

arguments.__proto__ === Array.prototype //false

14. 函数的作用域

看到面试题先把代码改了,做变量提升!再做题

面试题1:

var a = 1;
function f1() {
    console.log(a)
    var a = 2;
    f4.call();
}

function f4() {
    console.log(a);
}

f1.call();    //??

答案:undefined(f1的console.log)、1(f4的console.log)

面试题2:

var a = 1;
function f1() {
    console.log(a)
    var a = 2;
    f4.call();
}

function f4() {
    console.log(a);
}

a=2;
f1.call();    //?

答案:undefined、2

面试题3:

html

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JS

var liTags = document.querySelectorAll('li');
for(var i=0;i

答案:6
先JS变量提升

var liTags;
var i;
liTags = document.querySelectorAll('li');
for(i=0;i

因为点3时,for循环已执行完了,i变成6,所以输出的是6

面试题4

var x = function () {
  console.log(a);
};

function y(f) {
  var a = 2;
  f();
}

y(x)    // ?

答案:a is not defined
因为函数x在外部,不会引用y的内部变量

15. 闭包

var a = 1;

function f4() {
    console.log(a);
}

若一个函数使用了它作用域外的变量,那 (这个函数+变量) 就是闭包。
函数外部无法访问函数内部的变量,但使用闭包就可以

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999,闭包就是f2

本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的第二个作用就是让它读取的这些变量始终保持在内存中

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

闭包的另一个用处,是封装对象的私有属性和私有方法。

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

函数Person的内部变量_age,通过闭包getAge和setAge,变成了返回对象p1的私有变量。

16. 同名参数

function f(a, a) {
  console.log(a);
}

f(1, 2) // 2,以后面那个为准

function f(a, a) {
  console.log(a);
}

f(1) // undefined,以后面那个为准,若要取第一个,可以用arguments对象

17 .立即调用的函数表达式(IIFE)

function(){ /* code */ }();
// SyntaxError: Unexpected token (

这样写是错误的,因为JS把function在行首的一律解释成语句,而语句后不应该出现括号(),最简单的处理,就是将其放在一个圆括号里面。

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
//或者
-function(){ /* code */ }();
//或者
+function(){ /* code */ }();
//或者
!function(){ /* code */ }();
//或者
~function(){ /* code */ }();
//注意,上面前两种写法最后的分号都是必须的。

推而广之,任何以表达式来处理函数定义的方法,都是可以的

18. eval

eval命令的作用是,将字符串当作语句执行。

eval('var a = 1;');
a // 1

JavaScript 规定,如果使用严格模式,eval内部声明的变量,不会影响到外部作用域。

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()

即使在严格模式下,eval依然可以读写当前作用域的变量。

(function f() {
  'use strict';
  var foo = 1;
  eval('foo = 2');
  console.log(foo);  // 2
})()

本文版权归彭奕泽和饥人谷所有

你可能感兴趣的:(2018-03-26 JS 函数)