JavaScript Closure Comprehension Examples

Source: Internet
Author: User
Tags closure


function Jquery () { this.name = ' YSR '; This.sex = ' man '; return { x:this, age:26 }}var b = new Jquery (); b = = {x:jquery, age:26}//b.x = Jquery; B.x.name = ' YSR ';//b.x.sex = ' man '


var B = Jquery ();
b.x = window;

If there is no return;

function Jquery () {    this.name  = ' YSR ';    This.sex = ' man '; }var a = new Jquery ();//a={name: ' YSR ', Sex: ' Man '}

What is a closure (closure function)

Sentence summaries:

    • A closure is the local variables for a function-kept alive After the function has returned, or
    • A closure is a stack-frame which was not deallocated when the function returns (as if a ' stack-frame ' were malloc ' Ed instead of being on the stack!).
function SayHello (nAme) {   var text = "Hello" + name;   function Say () {            //function inside defines      console.log (text);   }   return say;} var AA = SayHello (' YSR '); AA ();              Hello YSR;

  

function SayHello (name) {   var text = "Hello" + name;  var say = function () {          //the anonymous function     console.log (text);   }   return say;} var AA = SayHello (' Yangyu '); AA ();  

  

Whenever you see the function keyword within another function, the inner function have access to variables in the outer fun Ction.

function foo (x) { var tmp = 3; function bar (y) { console.log (x + y + (++tmp));//would log (+) Bar (10);} Foo (2); This would always log, because bar can access x the which is defined as an argument foo to, and it can a LSO access tmp from foo .

That 's a closure. A function doesn ' t has a to return of order to being called a closure. Simply Accessing variables outside of your immediate lexical scope creates a closure.

Above This example, change it and return it.!!

The above function'll also log, because bar can still refer to x tmp and, even though it's no longer d irectly inside the scope
function foo (x) { var tmp = 3; return function (y) { console.log (x + y + (++tmp));//would also log }}var bar = foo (2);//bar is now a Closur E.bar (10);
Bar (//17)

The simplest example of a closure are this:

var a = 10;function Test () {  console.log (a);//would output  Console.log (b);//would output 6}var B = 6;test () ;

  

When a JavaScript function was invoked, a new execution context is created. Together with the function arguments and the parent object, this execution context also receives all the variables declare D outside of it (in the above example, both ' a ' and ' B ').

It is possible to create more than one closure function, either by returning a list of them or by setting them to global V Ariables. All of these would refer x tmp to the same and the same, they don ' t make their own copies.

Here, the number is x a literal number.  As with other literals in JavaScript, when was foo called, the number x is copied to as its foo argument x.

On the other hand, JavaScript always uses references if dealing with objects. If say, you called with an foo object, the closure it returns would reference that original object!

function foo (x) {  var tmp = 3;  return function (y) {    console.log (x + y + tmp);    X.memb = X.memb? X.MEMB + 1:1;    Console.log (X.MEMB);  }} var = new number (2); var bar = foo (age); Bar is now a closure referencing Age.bar ()//15//1bar (10)//15//2

  

function Makekitchen () {  var trashbags = [' A ', ' B ', ' C '];//Only 3 at first  return {    gettrashbag:function ( {      return Trashbags.pop ();}  };} var kitchen = Makekitchen (); Kitchen.gettrashbag (); Returns trash Bag Ckitchen.gettrashbag (); Returns trash Bag Bkitchen.gettrashbag (); Returns Trash Bag A

  

 

As expected, each call to would bar(10) increment x.memb . What's might not being expected, is that's x simply referring to the same object as the age variable! After a couple bar of calls to, 'll be age.memb 2! This referencing are the basis for memory leaks with HTML objects.

JavaScript Closure Comprehension Examples

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.