1. Function creates
  • Function declaration
  • Functional expression
    • Named function expression
    var func = function nfe(){};
alert(func === nfe);
// recursive call
var func = function nfe(){nfe(); }Copy the code
  • The Function constructor
var func = new Function('a'.'b'.'console.log(a+b); ');
func(1.2);/ / 3

var func = Function('a'.'b'.'console.log(a+b)); ');
func(1.2); / / 3
Copy the code

  1. this
  • Global this(browser)
console.log(this.document === document); //true
console.log(this= = =window); //true
this.a = 37;
console.log(window.a);/ / 37
Copy the code
  • General function this(browser)
function f1(){
    return this;
}
f1() === window; //true,global object

function f2(){
    "use strict"; //see strict mode
    return this;
}
f2() === undefined; //truw
Copy the code
  • This as a function of the object method
var o = {
    prop:37.f:function(){
        return this.prop; }};console.log(o.f()); //logs 37

var o = {prop:37};
function independent(){
    return this.prop;
}
o.f = independent;
console.log(o.f()); //logs 37
Copy the code
  • This on the object prototype chain
var o = {f:function(){return this.a+this.b; }};var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); / / 5
Copy the code
  • The get/set method and this
function modules(){
    return Math.sqrt(this.re * this.re + this.im * this.im);
}
var o = {
    re:1.im: -1.get phase() {return Math.atan(this.im,this.re); }};Object.defineProperty(o,'modulus', {get:modulus,enumerable:true.configurable:true});
 
console.log(o.phase,o.modulus); / / logs to 0.78 1.4142
Copy the code
  • Constructor returns this if it has a return, otherwise return this
function MyClass(){
    this.a = 37;
}
var o = new MyClass();
console.log(o.a); / / 37

function C2(){
    this.a = 37;
    return {a:38};
}
o = new C2();
console.log(o.a);
Copy the code
  • The call/apply method and this
function add(c,d){
    return this.a + this.b + c +d;
}
var o = {a:1.b:3};
add.call(o,5.7); / / 1 + 3 + 5 + 7 = 16
add.apply(o,[10.20]); / / 1 + 3 + 10 = 34 + 20

function bar(){
    console.log(Object.prototype.toString.call(this));
}
bar.call(7); //"[object Number]"
Copy the code
  • The bind method and this — IE9 + are available
function f(){
    return this.a;
}
var a = f.bind({a:"test"});
console.log(g()); //test

var o = {a:37.f:f,g:g};
console.log(o.f(),o.g()); //37,test
Copy the code
  1. Function properties &arguments
function foo(x,y,z){
    arguments.length; / / 2
    arguments[0]; / / 1
    arguments[0] = 10; // no change in strict mode
    x; //change to 10
    
    arguments[2] = 100;
    z; //still undefined!
    arguments.callee === foo; //true
}

foo{1.2};
foo.length; //3 Number of parameters
foo.name; / / "foo" function name
arguments.length; // Number of arguments
Copy the code
  1. Apply/Call method (browser)
function foo(x,y){
    console.log(x,y,this);
}
foo.call(100.1.2); / / 1, 2, Number (100).
foo.apply(true[3.4]); / / 3, 4, Boolean (true)
foo.apply(null); //undefined,undefined,window
foo.apply(undfined); //undefined,undefined,window
Copy the code
  1. Bind method – IE9 and above
this.x = 9;
var module = {
    x:81.getX:function(){return this.x;}
};

module.getX(); / / 81

var getX = module.getX;
getX(); / / 9

var boundGetX = getX.bind(module);
boundGetX(); / / 81
Copy the code
  1. The use of bind and currying functions
function add(a,b,c){
    return a+b+c;
}
var func = add.bind(undefined.100);
func(1.2); / / 3
var func2 = func.bind(undefined.200);
func2(10); / / 310

function getConfig(colors,size,otherOptions){
    console.log(colors,size,otherOptions);
}
var defaultConfig = getConfig.bind(null."#CC0000"."1024 * 768");

defaultConfig("123"); //#CC0000 1024*768 123
defaultConfig("456"); //#CC0000 1024*768 456
Copy the code
  1. Bind with new
function foo(){
    this.b = 100;
    return this.a;
}

var func = foo.bind({a:1});

func(); / / 1
new func(); //{b:100}
Copy the code

  1. closure
functon outer(){
    var localVal = 30;
    return localVal;
}
outer(); / / 30

function outer(){
    var localVal = 30;
    return function (){
        returnlocalVal; }}var func = outer();
func(); / / 30
Copy the code

Note: Loop closures

Closure:Pros and cons of closures:

  1. Scope (the global function eval) has no block-level scope
var a = 10;
(function(){
    var b = 20; }) ();console.log(a); / / 10
console.log(b); //error,b in not defined

for(var item in {a:1.b:2{})console.log(item);
}
console.log(item);   //item still in scope

eval("var a = 1;"); eval
Copy the code

Scope chain

function outer2(){
    var local2 = 1;
    function outer1(){
        var local1 = 1; //visit local1,local2 or global3 
    }
    outer1();
}

var global3 = 1;
outer2();

function outer(){
    var i = 1; 
    var func = new Function("console.log(typeof i);");
    func(); //undefined
   outer();
}
Copy the code

Using function scope encapsulation

(function(){
    //do sth here
    vara,b; }) (); !function(){
    //dosth here
    vara,b; } ();Copy the code