Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to create a JavaScript constructor

2025-02-27 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

In this article Xiaobian for you to introduce in detail "how to create JavaScript constructor", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to create JavaScript constructor" can help you solve your doubts.

In JavaScript, a constructor is a special function used to initialize a new object when its memory is allocated. The object constructor is used to create a special type of object. When the object is first created, it is used to assign values to the member's properties and methods by receiving parameters.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

What is the JavaScript constructor?

In object-oriented programming, a constructor is a special function used to initialize a new object when its memory is allocated. In JavaScript, everything is an object. The object constructor is used to create a special type of object, first of all, it prepares the object to be used, and secondly, when the object is first created, it is used to assign the properties and methods of the member by receiving parameters.

Object creation

There are three basic ways to create objects:

Var newObject = {}; / / orvar newObject = Object.create (null); / / orvar newObject = newObject ()

When the Object constructor creates an object wrapper for a specific value, or does not pass a value, it creates an empty object and returns it.

Four ways to assign a key-value pair to an object:

/ / ECMAScript 3 compatible form / / 1. The "dot" method / / sets the property newObject.someKey = "Hello World"; / / gets the property var key = newObject.someKey;// 2. Square brackets method / / set the property newObject ["someKey"] = "Hello World"; / / get the property var key = newObject ["someKey"] / / ECMAScript 5 compatibility form only / / For more information see: http://kangax.github.com/es5-compat-table/// 3. Object.defineProperty mode / / set property Object.defineProperty (newObject, "someKey", {value: "for more control of the property's behavior", writable: true, enumerable: true, configurable: true}) / / if you find the above difficult to read, you can briefly write it as follows: var defineProp = function (obj, key, value) {var config = {value} Object.defineProperty (obj, key, config);}; / / to use it, we need to create a "person" object var person = Object.create (null); / / construct the object defineProp (person, "car", "Delorean") with attributes DefineProp (person, "dateOfBirth", "1981"); defineProp (person, "hasBeard", false); / / you can also create a racing driver var driver = Object.create (person) that inherits from Person; / / set the driver's property defineProp (driver, "topSpeed", "100mph"); / / get the inherited attribute (1981) console.log (driver.dateOfBirth); / / get the 100mph console.log (driver.topSpeed) we set. / / 4. Object.defineProperties mode / / set properties Object.defineProperties (newObject, {"someKey": {value: "Hello World", writable: true}, "anotherKey": {value: "Foo bar", writable: false}}); any one of 1 and 2 available in / 3 and 4

Basic constructor

As we saw earlier, JavaScript does not support the concept of classes, but it has a constructor function that works with objects. Using the new keyword to call the function, we can tell JavaScript to use the function as a constructor, which can initialize an object with its own defined members.

Inside this constructor, the keyword this refers to the object that has just been created. Back to object creation, a basic constructor looks like this:

Function Car (model, year, miles) {this.model = model; this.year = year; this.miles = miles; this.toString = function () {return this.model + "has done" + this.miles + "miles";};} / use: / / We can instantiate a Carvar civic = new Car ("Honda Civic", 2009, 20000); var mondeo = new Car ("Ford Mondeo", 2010, 5000) / / Open the browser console to view the output values of the toString () method of these objects console.log (civic.toString ()); console.log (mondeo.toString ())

The above is a simple version of the constructor pattern, but it has two problems:

Difficult to inherit

In every object created by the Car constructor, functions such as toString () are redefined

This is not very good, ideally all objects of type Car should refer to the same function

Constructors that use "prototype"

In JavaScript, the function has an attribute of prototype. When we call JavaScript's constructor to create an object, the properties on the constructor prototype can be accessed and called for the created object.

Function Car (model, year, miles) {this.model = model; this.year = year; this.miles = miles;} / / Note here we use Object.prototype.newMethod instead of Object.prototype to prevent us from redefining the prototype object Car.prototype.toString = function () {return this.model + "has done" + this.miles + "miles";}; / use: var civic = new Car ("Honda Civic", 2009, 20000) Var mondeo = new Car ("Ford Mondeo", 2010, 5000); console.log (civic.toString ()); console.log (mondeo.toString ())

With the above code, a single instance of toString () is shared by all Car objects.

After reading this, the article "how to create a JavaScript Constructor" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about the article, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report