Home > Web Front-end > JS Tutorial > body text

Objects and prototypes in JavaScript (1)

黄舟
Release: 2016-12-23 15:25:33
Original
1059 people have browsed it

 一 Factory Pattern

  We know that to create an object we can use the following code:

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'
Copy after login

Creating objects in this way is relatively simple and intuitive, and it is also the most basic way to create objects in JavaScript. But there is a problem with this. If we need to create multiple objects, then I have to write a lot of repeated code. For example, if we want to create another object user1, we have to rewrite the above code. This is not appropriate in the actual development process. If there are too many objects, the amount of code will be greatly increased.

 In order to solve such a problem, we can use a method called factory pattern. This method is to solve the problem of instantiating objects that generates a lot of duplicate code.

function create(name, age) {
  var obj = new Object(); 
  obj.name = name; 
  obj.age = age;
  obj.run = function () {
    return this.name +' '+ this.age;
  };
  return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());
Copy after login

From the above code, we can see that the factory pattern solves the problem of a large amount of code duplication during instantiation, but another problem arises, that is, the identification problem. We simply cannot figure out which object they are instances of. For example

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true
Copy after login

The above code indicates that box1 is an Object object, but we cannot know which object was created.

 2 Constructor (Constructor Method)

 In order to solve the above problem, we can use the constructor method to create objects. The only difference between a constructor and an ordinary function is the way it is called. However, constructors are also functions.

function User(name, age) { //构造函数模式
  this.name = name;
  this.age = age;
  this.run = function () {
    return this.name + ' '+this.age;   };
}
Copy after login

 Just use the new operator when creating an object:

var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);
Copy after login

Now we can detect whether user1 or user2 belongs to User.

alert(user1 instanceof User);//true 
Copy after login

It can be seen that using the constructor method not only solves the problem of repeated instantiation, but also solves the problem of object recognition.

 The process performed when using the constructor is as follows:

 1. When executing new constructor (), new Object() is executed in the background;

 2. Give the scope of the constructor to the new object.

  3. Execute the code in the constructor;

  4. Return the new object directly in the background.

Next let’s look at the function issues inside the constructor. If we execute the following statement:

alert(user1.run==user2.run);//结果返回的是false
Copy after login

The result returns false, which means that the method is actually a reference address. If we repeatedly create multiple objects, the methods in each object will open up new space in the memory, which will waste more space. To solve this problem, we need to use the sharing of instance attributes or methods. We will continue to discuss solving this problem in the next article.

The above is the content of objects and prototypes in JavaScript (1). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template