javaScript closure and implementation class inheritance (non for ES6)

First, we all know that a function definition is this js

function func(){ //声明一个普通的函数 //省略代码 } 

The function without a name called anonymous functions, so long

function(){ //声明一个匿名函数,一般这样声明方式是用于回调函数 //省略代码 } 

Or we used to use a variable to hold the anonymous function, this variable as a function of itself

var func = function(){ //匿名函数保存到func变量内 //省略代码 } 

Also, when calling the function, the function name or variable name followed by a parenthesis, such as the following

func(); //调用函数 

Furthermore, you can also directly call when declaring the function, which is called the immediate execution of the function, we need to add two brackets, like this

(function(){ //即时执行函数 //省略代码 })(); 

Of course, the function can return a value, if it is to perform real-time function returns a value, then the effect will happen?

var func = (function(){ //即时执行函数 var i = 1; return i; })(); 

Write, func acquired not only anonymous function, but the return result of the function, func = 1

I'm dividing line ------ ---------------------------------------- -----------------------------------

Just, our function returns an integer, but if we return function is another function? It became closures, like this:

var func = (function(){ //即时执行函数 var resultFunc = function(){ //要返回的函数 //省略代码 } return resultFunc; })(); 

More than write a function func is resultFunc, so what use is it? See the following code, note that the scope of the variable i

var func = (function(){ var i = 5; //声明了局部变量 var resultFunc = function(){ console.log(i); //返回的函数体内能访问变量 i //省略代码 } //作用域内能访问变量 i return resultFunc; })(); //函数体外能不能访问变量 i 

i external variables such declaration is not accessible, is not like an object-oriented private member variables? Next we try the internal method

var func = (function(){ var i = 5; var privateFunc = function(){ //声明了局部变量 //省略代码 } var resultFunc = function(){ privateFunc(); //调用局部函数 //省略代码 } return resultFunc; })(); 

Summary about: practice, we can try to write:

var func = (function(){ var i = 5; var privateFunc = function(){ //声明了局部变量 console.log("执行了privateFunc局部函数"); } var resultFunc = function(j){ console.log("外部变量:"+j); console.log("内部变量:"+i); privateFunc(); //调用局部函数 //省略代码 } return resultFunc; })(); var test = new func(9); 
 
Results of the

This view, in fact resultFunc more like a constructor function in our new func () when necessary and is performed only once, and this function can accept external parameters, oh.

I'm dividing line ------ ---------------------------------------- -----------------------------------

Well, then we may want to add some public function prototype by the way, and these functions are accessible local variables and local functions:

var func = (function(){ var i = 5; var privateFunc = function(){ //声明了局部变量 console.log("执行了privateFunc局部函数"); } var resultFunc = function(j){ console.log("外部变量:"+j); console.log("内部变量:"+i); privateFunc(); //调用局部函数 //省略代码 } var _proto = resultFunc.prototype; //取出prototype变量 _proto.myName = "ken"; //prototype的变量 _proto.publicFunc = function(){ //prototype的方法 console.log("这个是公共的方法,还有我的名字是"+this.myName); } return resultFunc; })(); var test = new func(9); test.publicFunc(); console.log(test.myName); 
 
operation result

Externally through. "" Call the prototype of the content, prototype function body to access its own variables by this..
In this way, members of the public and private methods to achieve them through closures.

---------------------------------------- ------- dividing line again ----------------------------------

Through the above, the public variables and methods are stored in the prototype, in fact, if you want to simulate object-oriented inheritance, as long as the prototype copy of it, to tidy up the code of the parent class:

var Super = (function(){ function _super(){ console.log("Super constructor"); this.name = "Super"; } var _proto = _super.prototype; _proto.sayHi = function(){ console.log("hello ! my name is "+this.getMyName()); } _proto.getMyName = function(){ return this.name; } return _super; })(); var s = new Super(); s.sayHi(); 
 
When the new parent results

The following is a subclass inheritance

var child = (function(){ var extend = Super; //定义要继承的父类 function _child(){ //子类的构造函数 extend.call(this); //让父类内部的this替换成子类的this,执行函数 console.log("child constructor"); this.name="child"; //覆盖子类的name } var nullObj = function(){}; //这里建立一个空白对象 nullObj.prototype = extend.prototype; //空白对象的prototype指向父类的prototype _child.prototype = new nullObj(); //新建nullObj(实际上是复制一份)的prototype给_child _child.prototype.constructor = _child;//把_child的构造函数放回prototype里,因prototype刚刚已经被覆盖了 var _proto = _child.prototype; //取得prototype ///这里可以继续添加子类的方法 return _child; })(); 

Note: nullObj.prototype = extend.prototype; nullObj.prototype is quoted here, can not directly modify nullObj.prototype content, or will affect the code of the parent class, can only be copied to _child.prototype by new nullObj

Test call

var c = new child(); c.sayHi(); console.log(c.name); 
 
operation result

Here you can see first is to call the parent class constructor, and then call the constructor of the subclass, then sayHi method inherited by subclasses, and name the contents into a string of child subclass.

What is the use of closures methods are not the same as the class ES6?
● ES6 private members of the class does not exist, internal access through this variable or function, external through. "" Access.
● The closure mode can have private members, members of the public with access ES6 the same way, access to the private members because of scope, as long as the direct call enough.
● ES6 simpler than using the closure mode can be selected according to their own use.




Link: https: //www.jianshu.com/p/77e5840fc514

Guess you like

Origin www.cnblogs.com/porter/p/12152455.html