Có chức năng vượt qua trong javascript không?

Trong bài viết này, chúng ta sẽ xem cách javascript chuyển qua tham chiếu hoặc giá trị hoạt động và sự khác biệt giữa hai phương thức

Mục lục

• Giới thiệu về chuyển javascript theo tham chiếu và chuyển theo giá trị
• Chuyển Javascript theo tham chiếu
• Javascript vượt qua giá trị
• lời chia tay

Giới thiệu về chuyển javascript theo tham chiếu và chuyển theo giá trị

Trước khi đi sâu vào truyền javascript theo tham chiếu hoặc truyền theo hàm giá trị, điều quan trọng là phải hiểu sự khác biệt giữa nguyên hàm và đối tượng

giá trị nguyên thủy

Đây là những giá trị cơ bản nhất mà người ta có thể nghĩ đến, bao gồm, không xác định, null, boolean, chuỗi và số. Các giá trị nguyên thủy được truyền theo giá trị trong javascript

Trong khi tất cả các đối tượng [bao gồm cả hàm] được truyền theo tham chiếu trong javascript

Hãy cho chúng tôi hiểu truyền theo tham chiếu và truyền theo giá trị là gì trước khi xem các ví dụ

Chuyển Javascript theo tham chiếu

Trong Pass by Reference, một hàm được gọi bằng cách chuyển trực tiếp tham chiếu/địa chỉ của biến làm đối số. Thay đổi đối số bên trong hàm ảnh hưởng đến biến được truyền từ bên ngoài hàm. Trong các đối tượng và mảng Javascript được truyền theo tham chiếu

//javascript pass by reference
function callByReference[varObj] {

    console.log["Inside Call by Reference Method"];

    varObj.a = 100;

    console.log[varObj];

}

let varObj = {
    a: 1
};

console.log["Before Call by Reference Method"];

console.log[varObj];

callByReference[varObj]

console.log["After Call by Reference Method"];

console.log[varObj];
}

đầu ra

Before Call by Reference Method
{a: 1}

Inside Call by Reference Method
{a: 100}

After Call by Reference Method
{a: 100}

Javascript vượt qua giá trị

Trong javascript truyền theo giá trị, hàm được gọi bằng cách truyền trực tiếp giá trị của biến làm đối số. Do đó, ngay cả việc thay đổi đối số bên trong hàm cũng không ảnh hưởng đến biến được truyền từ bên ngoài hàm

Điều quan trọng cần lưu ý là trong javascript, tất cả các đối số của hàm luôn được truyền theo giá trị. Tức là JavaScript sao chép các giá trị của các biến truyền vào các đối số bên trong hàm

//javascript pass by value
function square[x] {

    x = x * x;

    return x;

}

var y = 10;

var result = square[y];

console.log[y]; // 10 -- no change
console.log[result]; // 100 

Giải thích mã

Như bạn có thể thấy ở đây, khi chúng ta đã chuyển biến y vào hàm square, giá trị của y được sao chép vào biến x bằng javascript [do đó chuyển theo giá trị]

Lưu ý rằng việc chuyển một đối số chức năng theo giá trị không ảnh hưởng đến chính biến ban đầu, như khi bạn tạo một biến mới [y trong trường hợp này] và gán nó cho giá trị của một biến khác [x], một vị trí khác trong bộ nhớ riêng biệt . Vì vậy, theo giá trị sao chép giá trị của biến ban đầu [a] vào hai vị trí riêng biệt trong bộ nhớ

Mặt khác, trong trường hợp này nếu chúng ta truyền biến y theo tham chiếu, thì giá trị của nó sẽ thay đổi thành 100, vì khi truyền theo tham chiếu, hàm sẽ tự lấy biến gốc và sử dụng nó trong hàm thay vì sử dụng bản sao của

lời chia tay

Khi so sánh cả hai hàm, cụ thể là truyền javascript theo tham chiếu, truyền theo giá trị, chúng ta có thể thấy rằng TẤT CẢ các đối tượng tương tác theo tham chiếu trong Javascript, vì vậy khi đặt bằng nhau hoặc truyền cho một hàm, chúng đều trỏ đến cùng một vị trí nên khi bạn thay đổi . Đây là một điểm khác biệt rõ rệt so với truyền theo giá trị, trong đó hàm truyền theo giá trị sao chép giá trị vào hai vị trí riêng biệt trong bộ nhớ, khiến chúng trở thành các thực thể hoàn toàn riêng biệt mặc dù ban đầu một thực thể được đặt bằng với thực thể kia.

Tóm lược. hướng dẫn này giải thích cách hoạt động của tính năng truyền theo giá trị của JavaScript và cung cấp cho bạn một số ví dụ về việc truyền các giá trị nguyên thủy và tham chiếu cho một hàm

Trước khi tiếp tục với hướng dẫn này, bạn nên có kiến ​​thức tốt về các giá trị nguyên thủy và tham chiếu cũng như sự khác biệt giữa chúng

Truyền theo giá trị hoặc tham chiếu theo tham chiếu của JavaScript

Trong JavaScript, tất cả các đối số của hàm luôn được truyền theo giá trị. Điều đó có nghĩa là JavaScript sao chép các giá trị của biến vào các đối số của hàm

Bất kỳ thay đổi nào bạn thực hiện đối với các đối số bên trong hàm không phản ánh các biến truyền bên ngoài hàm. Nói cách khác, những thay đổi được thực hiện đối với các đối số không được phản ánh bên ngoài hàm

Nếu đối số của hàm được truyền theo tham chiếu, thì những thay đổi của biến mà bạn truyền vào hàm sẽ được phản ánh ra bên ngoài hàm. Điều này là không thể trong JavaScript

Pass-by-value của giá trị nguyên thủy

Hãy cùng xem ví dụ sau

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

Cách thức hoạt động của kịch bản

Đầu tiên, xác định một hàm

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change

  

Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

Tiếp theo, khai báo biến

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

Sau đó, chuyển biến

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

Sau đó, hàm

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

Cuối cùng, giá trị của biến

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

Nếu JavaScript sử dụng tham chiếu chuyển qua, thì biến

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Giá trị truyền qua của giá trị tham chiếu

Không rõ ràng rằng các giá trị tham chiếu cũng được truyền bởi các giá trị. Ví dụ

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Cách thức hoạt động của kịch bản

Đầu tiên, xác định biến

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Tiếp theo, xác định hàm

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Sau đó, chuyển đối tượng

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Bên trong, công cụ JavaScript tạo tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Sau đó, tăng thuộc tính

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];

  

Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Cuối cùng, truy cập đối tượng thông qua tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Có vẻ như JavaScript chuyển một đối tượng theo tham chiếu vì thay đổi đối với đối tượng được phản ánh bên ngoài hàm. Tuy nhiên, đây không phải là trường hợp

Trên thực tế, khi truyền một đối tượng cho một hàm, bạn đang truyền tham chiếu của đối tượng đó chứ không phải đối tượng thực. Do đó, hàm có thể sửa đổi các thuộc tính của đối tượng thông qua tham chiếu của nó

Tuy nhiên, bạn không thể thay đổi tham chiếu được truyền vào hàm. Ví dụ

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

đầu ra

//javascript pass by value
function square[x] {

    x = x * x;

    return x;

}

var y = 10;

var result = square[y];

console.log[y]; // 10 -- no change
console.log[result]; // 100 

Trong ví dụ này, hàm

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

và biến tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Tuy nhiên, tham chiếu

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

function square[x] {
    x = x * x;
    return x;
}

let y = 10;
let result = square[y];

console.log[result]; // 100 
console.log[y]; // 10 -- no change
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

let person = {
  name: 'John',
  age: 25,
};

function increaseAge[obj] {
  obj.age += 1;

  // reference another object
  obj = { name: 'Jane', age: 22 };
}

increaseAge[person];

console.log[person];
Code language: JavaScript [javascript]

Chúng ta có thể chuyển chức năng trong JavaScript không?

Làm cách nào để truyền dữ liệu trong JavaScript?

Vượt qua JavaScript là gì?

JavaScript có chuyển qua tham chiếu không?