1 Function object

Section 1: Function object introduction

Function is the method object of js. You can use function instances to generate any js method object

The second section: creating method objects with Function

<script type="text/javascript">
 /* function say(name,age){
  alert(name+"This year "+ age +");
 }
 say("Zhang three, "3"; *///This is the traditional way to create funtino objects
 
 var sayFunc=new Function("name","age","alert(name+'This year'+age+'Year old')");
 sayFunc("Li Si",4);
 
</script>

Section 3: Function object properties

<script type="text/javascript">
 var sayFunc=new Function("name","age","alert(name+'This year'+age+'Year old')");
 // sayFunc("Li Si", 4);
 alert("sayFunc Number of method parameters of method object:"+sayFunc.length);//Function object properties
 
</script>

Section 4: Function object method

<script type="text/javascript">
 var sayFunc=new Function("name","age","alert(name+'This year'+age+'Year old')");
 // sayFunc("Li Si", 4);
 // Alert ("number of method parameters of sayfunc method object:" + sayFunc.length);
 alert(sayFunc.toString());//Method of Function object
 alert(sayFunc.valueOf());
</script>

2 Javascript closure

Section 1: scope of Js variable

Scope is divided into global variable and local variable
(1) Declare global variables

<script type="text/javascript">
 var a=22;
 
 function func(){
  alert(a);
 }
 
 func();
</script>

(2) The second way to declare global variables: the var keyword is not used inside the method body, and the variables declared inside the method body are local variables

<script type="text/javascript">
 function func(){
  // var a=22; / / for example, a is a local variable
  a=22;//This a is the global variable
 }
 
 func();
 alert(a);
 
</script>

Section 2: read the local variables inside the method from the outside

The following code is a closure

<script type="text/javascript">
 function func(){
  var a=22;
  
  function func2(){
   return a;
  }
  
  return func2;
 }
 
 var result=func();
 alert("Visit func Private local variable of a:"+result());
 //The result here is equivalent to func2, so if you want to execute func2 later, you need result()
 //The above two lines of code are equivalent to alert(func()())
</script>

Section three: the concept of closure

The definition of "closure" in various professional literatures is very abstract and difficult to understand. My understanding is that a closure is a function that can read internal variables of other functions. In Javascript language, only the sub function inside the function can read the local variable, so the closure can be simply understood as "a function defined inside a function". So, in essence, closure is a bridge connecting the inside and outside of a function

Section 4: purpose of closure

One is that the variables inside the function can be read, and the other is to keep the values of these variables in memory
Section 5: Notes on the use of closures
1) Because closures can save variables in functions in memory, which consumes a lot of memory, closures cannot be abused, otherwise it will cause performance problems of web pages and memory leakage in IE. The solution is to delete all unused local variables before exiting the function.
2) The closure changes the value of the variable inside the parent function, outside the parent function. Therefore, if you use the parent function as an object, the closure as its Public Method, and the internal variable as its private value, you must be careful not to change the value of the internal variable of the parent function

<script type="text/javascript">
 var name="The Window";
 //Declare an object with a key value pair (that is, an object initializer), and then declare a property and a method respectively
 var object={
   name:"My object",
   getNameFunc:function(){
    var name="object func";
    return function(){
     return name;//If "return this.name" is used here, The Window will be returned, because this refers to The Window object, which has the name attribute and the object attribute. This in the closure refers to The Window object. If this is used in the parent method, it refers to the object object object. (that is, this in the internal method, which is the top layer by default, that is, window)
    };
   }
 };
 alert(object.name);//My Object
 alert(object.getNameFunc()());//Object func
</script>

All the above definitions are methods, but the method is a Function object, so you can use new to create a new method.

3. Object oriented features of JS

3.1 three characteristics of object-oriented: encapsulation, inheritance and polymorphism

3.2 JS custom object

1. Create objects by:
Mode 1: object initializer mode;

var marry={
  name:"marry",
  age:2,
  shout:function(){
   alert("I am:"+this.name+",This year:"+this.age);
  },
  action:function(){
   alert("Will eat");
  }
 };
 
 alert(marry.name);
 alert(marry.age);
 marry.shout();
 marry.action();

Mode 2, constructor mode;

 function Dog(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
   alert("I am:"+this.name+",This year:"+this.age);
  };
  this.action=function(){
   alert("Will eat");
  };
 }
 
 var jack=new Dog("jack",1);
 alert(jack.name);
 alert(jack.age);
 jack.shout();
 jack.action();

2. Object attribute definition: private attribute; object attribute; class attribute;

<script type="text/javascript">
 function C(){
  this.objPro="Object attribute";
  C.prototype.objPro2="Object property 2";
  var privatePro="Private attributes";//The obtainment of private property uses the closure mentioned above
 }
 C.classPro="Class attribute";
 
 alert(C.classPro);//Get class properties
 var c=new C();//Get the object before getting the object properties
 alert(c.objPro);
 alert(c.objPro2);
</script>

3. Object method definition: private method; object method; class method

<script type="text/javascript">
 function C(){
  var privateFunc=function(){
   alert("Private method");
  };
  privateFunc();//Private methods can only be called directly
  this.objFunc=function(){
   alert("Object method");
  };
  C.prototype.objFunc2=function(){
   alert("Object method 2");
  };
 }
 C.classFunc=function(){
  alert("Class method");
 };
 
 C.classFunc();//Call class methods directly
 var c=new C();//To call an object method, you first need to get the object
 c.objFunc();
 c.objFunc2();
</script>

3.3 JS implementation encapsulation features

3.4 JS implementation inheritance feature

Apply() implements inheritance of properties and methods;

<script type="text/javascript">
 function Animal(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
   alert("I am:"+this.name+",This year:"+this.age);
  };
  this.action=function(){
   alert("Will eat");
  };
 }
 
 function Dog(name,age){
  Animal.apply(this, [name,age]);
  //this here refers to the parameter list passed in by the method header for the dog () parameter
 }
 
 var jack=new Dog("jack",1);//jack here belongs to the dog object
 alert(jack.name);
 alert(jack.age);
 jack.shout();
 jack.action();
</script>

Prototype implementation prototype inheritance

<script type="text/javascript">
 function Animal(name,age){
  this.name=name;
  this.age=age;
  this.shout=function(){
   alert("I am:"+this.name+",This year:"+this.age);
  };
  this.action=function(){
   alert("Will eat");
  };
 }
 
 function Dog(name,age){
  Animal.apply(this, [name,age]);
 }
 Dog.prototype=new Animal();//With this sentence added, it becomes prototype based inheritance******
 
 var jack=new Dog("jack",1);//The jack class here belongs to the Animal object
 alert(jack.name);
 alert(jack.age);
 jack.shout();
 jack.action();
</script>

3.5 JS implementation of polymorphism

<script type="text/javascript">
 function Animal(){
  this.say=function(){
   alert("I am an animal.");
  };
 }
 
 function Dog(){
  this.say=function(){
   alert("I am a dog.");
  };
 }
 Dog.prototype=new Animal();
 
 function Cat(){
  this.say=function(){
   alert("I am a cat.");
  };
 }
 Cat.prototype=new Animal();
 
 function say(animal){
  if(animal instanceof Animal){
   animal.say();
  }
 }
 
 var dog=new Dog();
 var cat=new Cat();
 say(dog);
 say(cat);
</script>