Hướng dẫn nested closures javascript - javascript đóng cửa lồng nhau

Đã đăng vào thg 5 25, 2017 9:37 SA 2 phút đọc 2 phút đọc

Nested function

Trong Javascript, bạn có thể lồng 1 hàm bên trong 1 hàm khác. Tất cả các biến (variables) cũng như đối số (arguments ) từ hàm cha (outer function) đều được "kế thừa" từ hàm con (inner function). Nói cách khác, Inner function chứa Scope của outner function.Trong khi đó outer function không thể sử dụng được các biến (variables) cũng như đối số (arguments) của inner function . Code exampleScope của outner function.Trong khi đó outer function không thể sử dụng được các biến (variables) cũng như đối số (arguments) của inner function . Code example

    function outside(a) {
      function inside(b) {
            return a + b;
      }
      return inside;
    }
    outside(1)(4) // return 5;

Cùng giải thích 1 chút nhé:Trong hàm outside (outner function) ta có định nghĩa 1 hàm inside() , hàm này làm nhiệm vụ đơn giản là trả về tổng của 2 số - 1 tham số được truyền vào từ outner function, 1 tham số được truyền vào từ chính inner function . Cuối cùng, hàm outside sẽ trả về 1 hàm return inside;return inside;

Closures

Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created. Đọc định nghĩa có vẻ khá lằng nhằng . Có thể hiểu đơn giản closure là 1 thứ dùng để bao đóng các thứ khác(Environment ở đây chính là các outner function mà ta đã nói ở phần Nested Function). Trong closure sẽ chứa các function và các variable, arguments mà các function đó có thể truy cập được đến. Điều quan trọng là function nằm bên trong Closure vẫn có thể truy xuất được tất cả các biên nằm bên trong Closure. Miễn là function còn tồn tại thì các biến bên trong Closure sẽ không bị thu dọn, để cho function có thể truy xuất chúng bất cứ khi nào nó muốn. Code example

. Có thể hiểu đơn giản closure là 1 thứ dùng để bao đóng các thứ khác(Environment ở đây chính là các outner function mà ta đã nói ở phần Nested Function). Trong closure sẽ chứa các function và các variable, arguments mà các function đó có thể truy cập được đến.

Điều quan trọng là function nằm bên trong Closure vẫn có thể truy xuất được tất cả các biên nằm bên trong Closure. Miễn là function còn tồn tại thì các biến bên trong Closure sẽ không bị thu dọn, để cho function có thể truy xuất chúng bất cứ khi nào nó muốn. Code example

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

Trong Javascript, một Closure sẽ chứa function và những biến mà được khai báo trong tầm vực của function như mình đã nói ở trên. Trong đoạn code ở trên, khi chúng ta khai báo inner function, Javascript sẽ tạo một Closure và cho function đó cũng như tất cả các biến mà function đó truy xuất vào. Vì thế khi chúng ta gọi function được trả về từ function ‘pet’ nó vẫn có thể truy xuất được dữ liệu của biến ‘name’. Trên đây, là 1 chút chia sẻ mà mình biết được về nested function cũng như closure trong Javascript, Rất mong nhận được sự góp ý của mọi người Nguồn tham khảo: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Functions https://developer.mozilla.org/en/docs/Web/JavaScript/Closures#Closure https://codeaholicguy.com/2015/12/31/javascript-closures/

All rights reserved

Đã đăng vào thg 11 25, 2017 9:57 SA 4 phút đọc 4 phút đọc

Closure là gì ?

Closure là một khía cạnh quan trọng của Javascript mà các lập trình viên nên biết, bài viết hôm nay chúng ta cùng tìm hiểu những điều cơ bản về Closure, cách thức hoạt động của Closure trong Javascript. Chúng ta sẽ bắt đầu bằng cách xem xét hai định nghĩa về Closure:

Định nghĩa #1

Closure là một chức năng (function) có quyền truy cập vào phạm vi phụ huynh (parent scope) ngay cả khi phạm vi đã đóng.

Định nghĩa #2

Closure là sự kết hợp của một chức năng và môi trường mà chức năng đó được khai báo

Đầu tiên chúng ta cần tìm hiểu phạm vi (scope) trong Javascript. Phạm vi (scope) về cơ bản là tuổi thọ của một biến trong Javascript, nơi mà một biến được định nghĩa đóng một vai trò trong bao lâu và những chức năng (functions) trong chương trình có quyền truy cập nó.

Khi tạo một hàm trong Javascript, nó có quyền truy cập các biến được tạo bên trong và bên ngoài hàm. Các biến được tạo bên trong một hàm là các biến được định nghĩa cục bộ. Một biến địa phương (local variable) chỉ có thể được truy cập trong phạm vi chức năng mà nó được định nghĩa. Trong ví dụ dưới đây, bạn sẽ thấy rằng nếu chúng ta cố gắng lấy giá trị của

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

Tương phản với ví dụ này nơi chúng ta định nghĩa

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

// Example of accessing variables OUTSIDE the function
// words is a GLOBAL variable
var words = 'hi';
function speak(){ 
  console.log(words);
}
speak(); // 'hi' 
console.log(words); // 'hi'

Nested Functions

Điều gì xảy ra khi chúng ta viết một hàm bên trong một hàm khác? Chúng ta cùng xem ví dụ sau để biết nhé : Đầu tiên tạo một hàm có tên

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

 function speak() {
      return function logIt() {
          var words = 'hi';
          console.log(words);
      }
 }

Chúng ta tạo ra một biên và gán nó cho hàm

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

var sayHello = speak();

Bây giờ chúng ta có thể thấy giá trị của

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

sayHello;
//  function logIt() {
//    var words = 'hi';
//    console.log(words);
//  }

Như mong đợi,

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

sayHello();
// 'hi'

Nó hoạt động! Nhưng đây không phải là điều đặc biệt. Hãy di chuyển một dòng mã và xem những gì thay đổi. Hãy xem ví dụ dưới đây. Tôi đã di chuyển khai báo của chúng ta chuyển biến

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

function speak() {
  var words = 'hi';
  return function logIt() {
    console.log(words);
  }
}

Giống như trước, khai báo một biến và gán nó cho chức năng

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

var sayHello = speak();

Bây giờ chúng ta sẽ xem xét biến

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

Không có định nghĩa biến

    var pet = function(name) {
        return function() {
            return name;
        }
    }
    myPet = pet('Cat');
    myPet();

sayHello();
// 'hi'

Nó vẫn đúng. Và đó là bởi vì bạn vừa trải qua những ảnh hưởng của một Closure. Trong trường hợp này, phạm vi chức năng của

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

// Example of accessing variables OUTSIDE the function
// words is a GLOBAL variable
var words = 'hi';
function speak(){ 
  console.log(words);
}
speak(); // 'hi' 
console.log(words); // 'hi'

// Example of accessing variables OUTSIDE the function
// words is a GLOBAL variable
var words = 'hi';
function speak(){ 
  console.log(words);
}
speak(); // 'hi' 
console.log(words); // 'hi'

// Example of accessing variables INSIDE the function
// words is a LOCAL variable
function speak(){
  var words = 'hi'; 
  console.log(words);
}
speak(); // 'hi'
console.log(words); // Uncaught ReferenceError: words is not defined

function speak() {
  var words = 'hi';
  return function logIt() {
    console.log(words);
  }
}

Trên đây là phần giới thiệu cơ bản về Closure và cách thức hoạt động của một Closure trong Javascript.

All rights reserved