Detailed explanation of prototype usage in javascript

JavaScript is a very popular programming language. The power of JavaScript lies in its prototypes.

Prototype is a concept in the JavaScript Object Model. It allows us to build objects by inheriting properties and methods from other objects. This is how inheritance works in JavaScript.

This article will introduce the usage of prototypes in JavaScript in detail.

1. What is a prototype

Every object in JavaScript is derived from its prototype. The prototype of an object is another object, which has a prototype chain. Each object on this prototype chain is derived step by step from the original object until the ancestor object - the prototype of Object.

For example:

//创建一个对象
var obj = {};

The above code creates an empty object, and its prototype chain is like this:

obj -> Object.prototype -> null

The object obj is derived from the Object.prototype object. Object.prototype is the ancestor of all objects in JavaScript.

2. Prototype and Constructor

There are two concepts closely related to prototype in JavaScript: constructor and instance.

1. Constructor

Constructor is a function used to create objects of a specific type. Constructors can use prototypes to define properties and functions. For example:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

The above code defines a constructor Person, which has two parameters: name and age. In the constructor, we use the this keyword to set properties for the object instance. Now let's create a Person object:

var person1 = new Person('Tom', 20);

This object person1 is created by the Person constructor and has two attributes: name and age.

2. Instance

Instance is an object created by the constructor. Instances have access to properties and methods defined in the constructor prototype. For example:

//定义Person的原型方法
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
}
//调用对象方法
person1.sayHello();

defines a method sayHello on the Person prototype, which can be accessed by all Person instances. So when we call the person1.sayHello() method, it outputs: Hello, my name is Tom.

3. Prototypal inheritance

Prototypal inheritance is the main method of inheritance in JavaScript. It is implemented through the prototype chain.

Inheritance means that one object can access the properties and methods of another object. For example, a child object can inherit the properties and methods of its parent object. In JavaScript, an object can possess the properties and methods of another object through inheritance.

We can add properties and methods to the prototype object, and these properties and methods will be inherited by the instance created by the constructor. For example:

//定义一个Animal对象
function Animal(name) {
  this.name = name;
}
//在Animal的原型上定义一个属性
Animal.prototype.color = 'red';
//创建一个实例
var cat = new Animal('Tom');

In the above code, we define an Animal object, which has a name attribute and a prototype attribute color. Then we create a cat instance, which inherits the Animal prototype attribute color.

You can use the hasOwnProperty() method to determine whether an instance contains its own specific properties. For example:

console.log(cat.hasOwnProperty('name')); // true
console.log(cat.hasOwnProperty('color')); // false

4. Prototype static methods and properties

Static methods and properties belong to the constructor itself, they do not belong to the instance. Before ES5, JavaScript had no official mechanism for providing static methods and properties, so developers usually added them to constructors manually.

For example:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.create = function(name, age) {
  return new Person(name, age);
}

In the above code, we define a static method create(). This method can be called from the constructor itself, not from the instance.

In ES6, you can use class syntax to define static methods and properties. For example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static create(name, age) {
    return new Person(name, age);
  }
}

In the above code, we use class syntax to define a static method create().

5. Disadvantages of prototypal inheritance

Prototypal inheritance is very powerful and flexible because we can inherit the properties and methods of any object. But it also has some disadvantages.

1. All instances share prototype

Since the prototype is shared, all instances created from the same constructor will share the same prototype. If one instance modifies a property or method on the prototype, all instances will be affected.

2. Cannot access the private variables of the instance

The prototype method cannot access the private variables of the instance (that is, variables defined inside the constructor). Because these private variables can only be used inside the constructor.

6. Summary

Prototype is a very powerful concept in JavaScript, which can be used to implement inheritance, shared code, etc. In actual development, if used properly, prototypal inheritance can help us improve development efficiency and reduce the amount of code. However, we also need to be clear about the shortcomings of prototypal inheritance, especially issues such as prototype sharing and inability to access private variables.

The above is the detailed content of Detailed explanation of prototype usage in javascript. For more information, please follow other related articles on the PHP Chinese website!