Home > Web Front-end > Front-end Q&A > method attribute javascript

method attribute javascript

王林
Release: 2023-05-09 16:52:37
Original
490 people have browsed it

1. Overview

In JavaScript, methods and properties are two important components of objects. Methods are the behavior of an object, while properties are descriptions of the object. Methods and properties play an important role in object-oriented programming in JavaScript. This article will use examples to introduce the relevant knowledge of method attributes.

2. Properties

In JavaScript, the properties of an object can be primitive values ​​(such as strings, Boolean values, numbers, etc.) or objects. Properties are divided into two types: data properties and accessor properties. Data properties are stored directly in the object, while accessor properties do not store values ​​directly, but define a pair of getter and setter functions.

  1. Data attribute

A data attribute is an object property that contains a data value. A data attribute includes four characteristics that describe its behavior: writable, enumerable, configurable, and value. These four characteristics can be controlled through the Object.defineProperty method.

// Example code
let obj = {};
Object.defineProperty(obj, 'name', {
value: 'Xiao Ming',
writable: false, / /Not writable
enumerable: true, //Enumerable
configurable: false //Not configurable
});

  1. Accessor properties

Accessor properties are functions that are executed when getting and setting property values. An accessor property includes two methods, namely the getter function and the setter function. These two methods must correspond to the two keywords get and set respectively when they are defined.

// Example code
let obj = {
_name: 'Xiao Ming',
get name(){

return this._name
Copy after login

},
set name(value ){

console.log('更新了名字')
this._name = value
Copy after login

}
}
obj.name = 'Xiaohong'
console.log(obj.name) //Output: Xiaohong

3. Method

Method is the behavior of an object. Methods in JavaScript are special functions. Use methods to implement complex behavior of objects.

  1. Object methods

Object methods refer to functions that are properties of an object. Object methods usually use the this keyword to refer to the object itself.

// Example code
let obj = {
name: 'Xiao Ming',
sayHi: function(){

console.log(`Hi, 我的名字是${this.name}`)
Copy after login

}
}
obj.sayHi() //Output: Hi, my name is Xiao Ming

  1. Prototype method

The prototype method refers to the function that is the prototype attribute of the constructor. Prototype methods usually use the this keyword to refer to the instance object.

// Example code
function Person(name){
this.name = name
}
Person.prototype.sayHi = function(){
console.log (Hi, my name is ${this.name})
}
let person = new Person('Xiao Ming')
person.sayHi() //Output: Hi , My name is Xiao Ming

  1. Static method

Static method is a method that does not need to instantiate an object and is called directly through the constructor. Static methods are usually referenced using the class name.

// Example code
class Calculator{
static add(a, b){

return a + b
Copy after login

}
static subtract(a, b){

return a - b
Copy after login

}
}
console.log(Calculator.add(1, 2)) //Output: 3

4. Summary

Methods and properties are objects Two important components, mastering method attributes is very important for object-oriented programming in JavaScript. When writing code, we should flexibly use data attributes, accessor attributes, object methods, prototype methods and static methods to make the code more elegant, concise and easy to maintain.

The above is the detailed content of method attribute javascript. For more information, please follow other related articles on the PHP Chinese website!

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