Comprehensive analysis of Object type and scope in JavaScript object-oriented concepts (with examples)

This article mainly introduces the reference type and scope in parsing JavaScript object-oriented concepts. The article focuses on the call and apply methods needed to expand the running scope of functions. Friends can refer to it

Reference type

Reference types mainly include: Object type, Array type, Date type, RegExp type, Function type, etc.

When reference types are used, an object (instance) needs to be generated from them. In other words, the reference type is equivalent to a template. When we want to use a certain reference type, we need to use this template to generate an object for use, so the reference type is sometimes called an object definition.

For example, if we need to generate a person object to define someone's personal information and behavior, then we need to rely on the Object type:

var person = new Object();
person.name = "jiangshui";
person.sayName = function(){
  console.log(this.name);
}

The person object above is defined using the "template" of the Object type through the new operator. Then you can add the attribute name and method sayName to this object. Properties and methods are "features" of the Object type, so objects created through reference types such as Object can use this.

Creating an object does not necessarily require using the new operator. There are some types that can be simplified to create. For example, to create an object of type Object as above, you can also use the following two methods:

var person = {};
person.name = "jiangshui";
person.sayName = function(){
  console.log(this.name);
}

or

var person = {
  name : "jiangshui",
  sayName : function(){
    console.log(this.name);
  }
};

{} operator has the same function as new Object(), simplifying the operation . There are some differences between the above two ways of writing. The first one is "append", that is, continue to add attributes or methods to the previous definition. If an attribute method with the same name already exists, it will be overwritten. The second type is "replacement", which means that regardless of whether the attributes and methods of the person object are previously defined, this method will completely replace the previously defined ones with the newly defined content. Because the object generated by the reference type is stored in an area in memory, and then its pointer is stored in a variable (person), the second way of writing is to generate a new object (new memory area), and then save the person variable Points to the new memory area, so the previous one is replaced. Understanding this is crucial to understanding later.

The usage of other reference types is roughly the same, such as the Array type. You can also use [] to generate objects, or define them directly. After the array object is generated, the information content can be stored in the array format. In addition, the object will get the methods defined in the Array type, such as push, shift, sort, etc., and these methods can be called, for example:

var colors = [];
colors.push('red','green');
console.log(colors);

The above code creates an array type object through the Array type, then calls the push method defined previously in the Array type, and adds red and green values ​​​​to the object. Finally Print it on the console and you can see it.

call and apply methods

These two methods are provided by the Function type, that is to say, they can be used on functions. The call and apply methods have the same function, that is, they can expand the scope of function operation. The difference is that when using call, the parameters passed to the function must be listed one by one, but the apply method does not. In this way, you can decide to use call or apply according to the requirements of your own function.

What does it mean to extend the scope in which a function runs? Give an example and you will understand.

You can understand it this way, the function is wrapped in a container (scope), and there are some variables or other things in this container. When the function runs, calls these variables, etc., it will be found in the current container. this thing. This container is actually wrapped in a larger container. If the current small container does not exist, the function will search for it in the larger container, and so on, until it finds the largest container window object. But if the function is running in the current small container and there are corresponding variables in the small container, even in the large container, the function will still call the variables in its own container.

The call and apply methods are to solve this problem and break through the limitations of the container. Just take the previous example:

var person = {
  name : "jiangshui",
  sayName : function(){
    console.log(this.name);
  }
};

After opening Chrome’s Console, paste it in and execute it, and then execute person.sayName() to see

At this time, person is a container, in which a sayName method (function) is created. When executed, it must be executed under the person scope. When executed directly at the bottom, that is, executed under the scope of window, an error not defined will be reported because the sayName method is not defined under window. The this pointer inside is a special thing. It points to the current scope. The meaning of this.name is to call the name value under the current scope.

Next we add a name attribute to the window object:

window.name = "yujiangshui";

or directly

name = "yujiangshui";

因为 window 是最大的容器，所以 window 可以省略掉，所有定义的属性或者变量，都挂靠到 window 上面去了，不信可以看：

那现在我们就想在 window 这个大容器下面，运行 person 小容器里面的 sayName 方法，就需要用 call 或 apply 来扩充 sayName 方法的作用域。执行下面语句：

person.sayName.call(window);

或者

person.sayName.call(this);

输出的结果都是一样的，你也可以换用 apply 看看效果，因为这个 demo 太简单的，不需要传递参数，所以 call 和 apply 功能效果就完全一致了。

解释一下上面代码，sayName 首先是 Function 类型的实例，也就具有了 call 方法和 apply 方法，call 和 apply 方法既然是 Function 类型的方法，所以就需要用这种方式调用 person.sayName.call(window) 而不是什么 person.sayName().call(window) 之类的。

然后 call 和 apply 方法的参数，就是一个作用域（对象），表示将前面的函数在传递进去的作用域下面运行。将 window 这对象传递进去之后，sayName 方法中的 this.name 指向的就是 window.name，于是就扩充了作用域。

为什么传递 window 和 this 都是一样的效果？因为我们当前执行这个函数的位置是 window，前面说过 this 指针指向的是当前作用域，所以 this 指向的就是 window，所以就等于 window。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javascript中创建对象的各种模式解析（图文教程）

设计模式中的组合模式在JavaScript程序构建中的使用（高级篇）

详细解读JavaScript设计模式开发中的桥接模式（高级篇）

The above is the detailed content of Comprehensive analysis of Object type and scope in JavaScript object-oriented concepts (with examples). For more information, please follow other related articles on the PHP Chinese website!