Detailed explanation of operating properties and methods based on js objects

1. Overview

In the Java language, we can define our own classes and create objects based on these classes for use. In Javascript, we can also define our own classes, such as defining the User class, Hashtable class and so on.

Currently, there are some standard classes in Javascript, such as Date, Array, RegExp, String, Math, Number, etc., which provide us with a lot of convenience in programming. But for complex client programs, these are far from enough.

Different from Java, Java2 provides us with many standard classes, which basically meet our programming needs. However, Javascript provides very few standard classes, and many programming needs need to be implemented by ourselves. For example, Javascript does not have a Iriomote Hashtable, this is very inconvenient in processing key values.

Therefore, I personally think that a complete Javascript object view should be as follows:

2. Basic concepts

1, custom objects.

According to the object extension mechanism of JS, users can customize JS objects, which is similar to the Java language.

Corresponding to custom objects are JS standard objects, such as Date, Array, Math, etc.

2, prototype (prototype)

In JS, this is a way to create object properties and methods. New properties and methods can be added to objects through prototype.

Through prototype we can add new properties and methods to JS standard objects. For example, for String objects, we can add a new method trim().

Unlike strict programming languages ​​(such as Java), we can dynamically add new properties to JS objects during runtime.

3. Syntax rules

1, Object creation method

1) Object initializer method

Format: objectName = {property1:value1, property2: value2,…, propertyN:valueN}

property is the property of the object

value is the value of the object. The value can be one of three strings, numbers or objects

For example: var user={name:“user1”,age:18};

var user={name:“user1”,job:{salary:3000,title:programmer}

In this way, you can also initialize the object's method, for example:

var user={name:“user1”,age:18,getName:function(){
 
return this.name;
 
}
 
}

The constructor method will be explained later, including the definition of attributes and methods, etc., and also for the construction Explained in terms of functions.

2) Constructor method

Write a constructor and create the object through new method. The constructor can have construction parameters

For example:

function User(name,age){
 
this.name=name;
 
this.age=age;
 
this.canFly=false;
 
}
 
var use=new User();

2. Define object properties

1) Three types of properties can be defined for objects in JS: private properties, instance properties and class properties. Similar to Java, private properties only To be used within an object, instance properties must be referenced through the instance of the object, while class properties can be referenced directly through the class name.

2) Private property definition

Private properties can only be defined and used inside the constructor.

Grammar format: var propertyName=value;

For example:

function User(age){
 
this.age=age;
 
var isChild=age<12;
 
this.isLittleChild=isChild;
 
}
 
var user=new User(15);
 
alert(user.isLittleChild);//正确的方式
 
alert(user.isChild);//报错：对象不支持此属性或方法

3) Instance attribute definition, there are also two ways:

prototype method, syntax format: functionName.prototype.propertyName=value

this method, syntax format: this.propertyName=value, pay attention to the position of this in the following examples

In the above value can be a character, number, or object.

For example:

function User(){ }
 
User.prototype.name=“user1”;
 
User.prototype.age=18;
 
var user=new User();
 
alert(user.age);
 
—————————————–
 
function User(name,age,job){
 
this.name=“user1”;
 
this.age=18;
 
this.job=job;
 
}
 
alert(user.age);

3) Class attribute definition

Syntax format: functionName.propertyName=value

For example:

function User(){ }
 
User.MAX_AGE=200;
 
User.MIN_AGE=0;
 
alert(User.MAX_AGE);

Refer to the class attributes of JS standard objects:

Number.MAX_VALUE //Maximum numerical value Math.PI //Pi

4) Definition of attributes , in addition to the more formal way above, there is also a very special way of definition, syntax format: obj[index]=value

Example:

function User(name){
 
this.name=name;
 
this.age=18;
 
this[1]=“ok”;
 
this[200]=“year”;
 
}
 
var user=new User(“user1”);
 
alert(user[1]);

above In the example, it should be noted that the age attribute cannot be obtained through this[1], and the name attribute cannot be obtained through this[0]. That is, the index method must be used to refer to the index method, and the index method cannot be used to obtain the name attribute. Must be referenced in the normal way

3, define object methods

1) Three types of methods can be defined for objects in JS: private methods, instance methods and class methods, similar to Java:

Private methods can only be used inside the object

Instance methods must be used after the object is instantiated

Class methods can be used directly through the class name

Note: Method definition cannot be carried out through the index method mentioned above.

2) Define private methods

Private methods must be defined within the constructor body and can only be used within the constructor body.

Syntax format: function methodName(arg1,…,argN){ }

For example:

function User(name){
 
this.name=name;
 
function getNameLength(nameStr){
 
return nameStr.length;
 
}
 
this.nameLength=getNameLength(this.name);
 
}

3) Define instance methods, which is currently available Use two methods:

prototype method, used outside the constructor, syntax format:

functionName.prototype.methodName=method;

or

functionName.prototype.methodName=function(arg1,…,argN){};

this method, used inside the constructor, syntax format:

this.methodName=method;

or

this.methodName=function(arg1,…,argN){};

In the above syntax description, method is an external method that already exists, and methodName needs to be defined The method of an object means directly assigning an external method to a method of the object.

以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。

定义实例方法的一些例子：例子1

function User(name){
 
this.name=name;
 
this.getName=getUserName;
 
this.setName=setUserName;
 
}
 
function getUserName(){
 
return this.name;
 
}
 
Function setUserName(name){
 
this.name=name;
 
}

定义实例方法的一些例子：例子2

function User(name){
 
this.name=name;
 
this.getName=function(){
 
return this.name;
 
};
 
this.setName=function(newName){
 
this.name=newName;
 
};
 
}

定义实例方法的一些例子：例子3

function User(name){
 
this.name=name;
 
}
 
User.prototype.getName=getUserName;
 
User.prototype.setName=setUserName();
 
function getUserName(){
 
return this.name;
 
}
 
Function setUserName(name){
 
this.name=name;
 
}

定义实例方法的一些例子：例子4

function User(name){
 
this.name=name;
 
}
 
User.prototype.getName=function(){
 
return this.name;
 
};
 
User.prototype.setName=function(newName){
 
this.name=newName;
 
};

4）定义类方法

类方法需要在构造函数外面定义，可以直接通过构造函数名对其进行引用。

语法格式：

functionName.methodName=method;

或者

functionName.methodName=function(arg1,…,argN){};

例子：

function User(name){
 
this.name=name;
 
}
 
User.getMaxAge=getUserMaxAge;
 
function getUserMaxAge(){
 
return 200;
 
}

或者

User.getMaxAge=function(){return 200;};

alert(User.getMaxAge());

4，属性与方法的引用

1）从可见性上说：

私有属性与方法，只能在对象内部引用。

实例属性与方法，可以在任何地方使用，但必须通过对象来引用。

类属性与方法，可以在任何地方使用，但不能通过对象的实例来引用（这与Java不同，在Java中静态成员可以通过实例来访问）。

2）从对象层次上说：

与Java bean的引用类似，可以进行深层次的引用。

几种方式：

简单属性：obj.propertyName

对象属性：obj.innerObj.propertyName

索引属性：obj.propertyName[index]

对于更深层次的引用与上面类似。

3）从定义方式上说：

通过index方式定义的属性，必须通过index方式才能引用。

通过非index方式定义的属性，必须通过正常的方式才能引用。

另外注意：对象的方法不能通过index方式来定义。

5，属性与方法的动态增加和删除

1）对于已经实例化的对象，我们可以动态增加和删除它的属性与方法，语法如下（假定对象实例为obj）：

动态增加对象属性

obj.newPropertyName=value;

动态增加对象方法

obj.newMethodName=method或者=function(arg1,…,argN){}

动态删除对象属性

delete obj.propertyName

动态删除对象方法

delete obj.methodName

2）例子：

function User(name){
 
this.name=name;
 
this.age=18;
 
}
 
var user=new User(“user1”);
 
user.sister=“susan”;
 
alert(user.sister);//运行通过
 
delete user.sister;
 
alert(user.sister);//报错：对象不支持该属性
 
user.getMotherName=function(){return “mary”;}
 
alert(user.getMotherName());//运行通过
 
delete user.getMotherName;
 
alert(user.getMotherName());//报错：对象不支持该方法

四，总结

1，自定义对象机制，是JS最为吸引人的机制之一，对于C++和Java程序员而言，这简直太棒了！

2，对象创建存在两种方式：对象初始化器和构造函数。

3，对象属性和方法，具有可见性的约束，不同可见性的属性和方法，其定义方式也不一样。

以上这篇基于js对象,操作属性、方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多基于js对象,操作属性、方法详解相关文章请关注PHP中文网！