JavaScript object study notes

Objects are the basic unit of JavaScript. In JS, everything is actually an object, and its function is very powerful. It not only has a unique style, but also has distinctive functions.

1. Reference

The concept of reference is one of the foundations of JS. It is a pointer to the actual location of an object. See the example below:

var items = new Array("abc","def","hig");
//创建此数组的引用
var Ref = items;
items.push("klm");
alert(Ref.lenth);  //此处应该显示4

However, if it is a string, a different situation will occur, see the code below:

var items = "abc";
var Ref = items;
items += "def";  //这里创建了一个新对象，而非原对象的修改。

Now Ref and items point to different objects.

2. Function overloading

Every function in JS has a variable argument, which is a pseudo array that receives all parameters. Why "pseudo", because you can't modify it, but it has length property. Let's take a look at the following example:

function  myFun(num1,num2)
{
    if(arguments.length == 2) { alert("我有两个参数"); }
    if(arguments.length == 1) { alert("我有一个参数"); }
}

Next, we call the function myFun("abc"); myFun("abc","def"); to see the difference. The most important thing is that this is a function duplication. Load it :)

3. Scope

In JavaScript, scope is divided by functions, not by blocks (while, if, for). This may cause some trouble when understanding some codes. To illustrate the details, let’s look at the following example:

var temp="oldTemp"    //全局变量
if(true)
{
    var temp = "newTemp"   //这里还在全局中
}
alert(temp == "newTemp")   //发现相等

But if we declare and change the temp variable in a function, the effect is completely different, see the example:

var temp="oldTemp" ;   //全局变量
function test()
{
    var temp = "newTemp";
}
test();
alert(temp == "newTemp") ;  //发现不相等

In JS, the global variable is a member of the window object Attributes, in the above example, the global variable temp == window.temp. It should also be noted that if a certain variable lacks a declaration, it will automatically become a global variable, although it is likely that it will only be used in a certain function.

4. Closure

Closure means that the inner function can refer to the variables in the function surrounding it, even if the outer function has terminated. See the example below:

function AddNum(num1)
{
    return function (num2)
    {
        return num1 + num2;
    }
}
var temp = AddNum(4);          //传入第一个参数，然后AddNum消失
var temp2 = temp(5);           //传入第二个参数，然后相加，返回9
alert(temp2);

This example embodies the concept of closure very well. It is a special case and is certainly not used in this way.

5. Context object

The context object is reflected through this variable, which always points to the object where the current code is located. See the code below:

var obj ={
    yes:function(){
        this.val = true;
    },
    no:function(){
        this.val = false;
    }
}
alert(obj.val == null);   //这里我们发现对象obj没有val属性
obj.yes();                     //执行yes函数，obj有了val属性
alert(obj.val == true);
 
window.no = obj.no     //把obj的no函数传给window对象
window.no();
alert(obj.val == true) ;  //发现没有变化
alert(window.val == false)   //window里的val变为false;

It’s not easy to understand here. Fortunately, JS provides us with the call method. See the example below:

function changeColor(color)
{
    this.style.color = color;
}
changeColor("Red");    //这里不行，因为window对象没有style属性
var temp = document.getElementById("temp");
changeColor.call(temp,"White");  //这里注意call的用法

The call method sets the context object as the first parameter and the other parameters as parameters of the original function.

6. Objects

We have just entered the topic here, but with the previous concepts, there is actually not much content in this block. Let’s look at the example directly:

var obj = new Object();    //创建一个对象obj
obj.val = 5;               //创建属性obj，并为其赋值
obj.click = function()     //创建函数
{
    alert("我被单击了");
}

The above code is equivalent to the following code:

var obj = {
    val : 5,
    click: function(){
        alert("我被单击了");
    }
}

Unlike other object-oriented languages, JS does not have the concept of Class. In other languages, we basically need to instantiate a specific An instance of a class, but it is different in JS. Its approach is: any function can be instantiated as an object. We first create a simple object:

function User(name)
{
    this.name = name;
}
var temp = new User("张三");
alert(temp.name);

What if the above object User is only used as a function?

User("只作为函数使用");
alert(window.name);

The context of this becomes the window object.

7. Object methods

Public methods are accessible to end users in the context of the object. Here we need to understand the prototype attribute. See the code below:

function User(name,age)
{
    this.name = name;
    this.age = age;
}
User.prototype.getName = function(){ return this.name};
var user = new User("张三",25);
alert(user.getName());

We can also dynamically create public methods, see the code below:

function User(name,age)
{
    this.name = name;
    this.age = age;
    this.getName = function(){ return this.name};
}
 
var user = new User("张三",25);
alert(user.getName());

The dynamically generated method is not generated when the code is compiled for the first time. This technique is used to prototype, but the overhead is larger, but Also more powerful and flexible.

The above is the content of JavaScript object learning notes. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!