Bài viết này sẽ hướng dẫn bạn một vài cách thức để gán chồng đối tượng đặc biệt this trong ngôn ngữ lập trình JavaScript. Bài viết này sẽ chỉ ra nguyên nhân bạn không thể dùng toán tử gán bình thường (dấu =) cho đối tượng this cùng với biện pháp khắc phục. Nói chung, đây là một bài viết đáng đọc để bạn hiểu hơn về lập trình hướng đối tượng trong JavaScript.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

Have you ever experience a time when the calling object ‘this’ needed to be override and somehow you just couldn’t do that? You tried left hand assignment but it just won’t work? wondering how can ‘this’ object be overridden in JavaScript but can’t find the correct answer on Google? This article will explain how this can be done.

Left hand assignment

Ever tried left hand assignment to override ‘this’ object?

var obj = document.getElementById("button");
this = obj

It will fail and gives you ‘invalid assignment left-hand side‘.

Using Call() to override ‘this’ object

There is a function in JavaScript, Call() which can help you override ‘this’ object or specify the ‘this’ object. Let’s consider the following example,

function example(a,b)
{
	this.value == 'button'?alert(a):alert(b);
}
var textobj = document.getElementById('input_relink');
example.call(textobj, 'It is a button!', 'It is not a button');

We look at a text box and check whether the user key in ‘button’. But we uses ‘this’ object to verify the input text in the function example which takes in two parameter as shown above. The Call() method is used whenever you wish to override ‘this’ object which is placed at the first parameter and the rest of the parameter will be exactly the same as the method parameter. Hence, we used the function in this way for the above example because it has two parameter.

//override 'this' with object 'textobj'
example.call(textobj, 'It is a button!', 'It is not a button');

If we have another function which takes in 3 parameter, we will do this.

function example(a,b, c)
{
	this.value == 'button'?alert(a):alert(b);
	alert(c);
}
var textobj = document.getElementById('input_relink');
example.call(textobj, 'It is a button!', 'It is not a button', 'Completed');

You can also used it without parameter like the one illustrated below,

var o = { x: 15 };
function f()
{
    alert(this.x);
}
f.call(o);

Using Call() method restrict your variable given on the method. On the other hand, we can use another method Apply() which override the ‘this’ object giving the second parameter as an array.

Using Apply() method to override ‘this’ object

The difference between call and apply method is the parameter needed to use them. For Call() method it depends on the parameter of the function as shown above. But for Apply() method it can have more than the amount of parameter in the function (since it takes in an array). Similarly, the first parameter of both methods are used to override ‘this’ object. Let’s consider the following example,

var o = { x: 8 };
function example()
{
    // arguments[0] == object
	var sum = 0;
    for(var i = 1; i < arguments.length; i++)
    {
       sum+=arguments[i]
    }
	alert(sum+ this.x);
}
example.apply(o, 1, 2, 3, 4)

I am using the depreciated argument array to look through the argument being passed into the function, sum them up, alert to the user. Similarly, i can do this using an array.

var o = { x: 8 };
function example(a, b, c)
{
	alert(this.x+a+b+c);
}
example.apply(o, [1,2,3])

Pretty simple isn’t it?

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới