This article brings you a brief introduction to object-oriented and Object types in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Object-oriented
The full name of object-oriented programming is Object Oriented Programming, or OOP for short. Object-oriented programming is a programming method that uses abstract methods to create models based on the real world.
Object-oriented programming can be seen as software design that uses a series of objects to cooperate with each other. The three main characteristics of object-oriented programming are: encapsulation, inheritance, and polymorphism.
Encapsulation
The so-called encapsulation is to use it according to the requirements and get the corresponding results without knowing the real execution principle.
Encapsulation is mainly used to describe the (encapsulated) content contained in the object. It usually consists of two parts
Inheritance Inheritance usually refers to the relationship between classes. If two classes have the same properties or methods, then one class can inherit the other class without having to define the same properties or methods again.
Creating a specialized version of one or more classes is called inheritance (JavaScript only supports single inheritance). The specialized version of a class that is created is usually called a subclass, and the additional class is usually called a parent class.
Polymorphism
Different objects can define methods with the same name, and the methods act on the object where they are located. The ability of different objects to implement their own behaviors through the same method call is called polymorphism.
Constructor
The constructor, also known as the constructor or object template, is a method of the object. The constructor is called during instantiation. Functions can be used as constructors in JavaScript.
/* 创建构造函数->用于创建对象
* function 构造函数名称()｛
* this.属性名 = 属性值
* this.方法名 = function()｛
* 方法体
* ｝
* ｝
this关键字指代利用当前构造函数创建的对象*/
function Dog() {//这是构造函数，构造函数的属性和方法使用this关键字
this.name=function () {
console.log('哈士奇')
}
}
/* 利用构造函数创建对象*/
var dog = new Dog();
console.log(dog);Copy after login
Object type
Property descriptor
JavaScript provides an internal data structure that describes the value of an object and controls its behavior, such as Whether the property is writable, configurable, deletable, enumerable, etc. This internal data structure is called a property descriptor.
There are two main forms of attribute descriptors currently existing in objects: data descriptors and access descriptors.
Data descriptor
A data descriptor is a property with a value that may be writable or unwritable. The data descriptor has the following optional key values:
value: The value corresponding to this attribute. Can be any valid JavaScript value. The default is undefined,
writable: If and only if the writable of the attribute is true, the value can be changed by the assignment operator. Default is false.
configurable: If and only if the configurable of the attribute is true, the attribute descriptor can be changed, and the attribute can also be deleted from the corresponding object. Default is false.
enumerable: If and only if the enumerable of the property is true, the property can appear in the enumeration property of the object. The default is false.
Access descriptor
Access descriptor is a property described by a getter-setter function pair. There are the following optional key values
get: Provide a getter method for the property, if there is no getter, it will be undefined. When this property is accessed, the method will be executed. No parameters are passed in when the method is executed, but the this object will be passed in.
set: Provides a setter method for the property. If there is no setter, it will be undefined. This method is triggered when the property is modified. This method accepts the only parameter, which is the new parameter value of the changed attribute.
configurable: If and only if the configurable of the attribute is true, the attribute descriptor can be changed, and the attribute can also be deleted from the corresponding object. Default is false.
enumerable: If and only if the enumerable of the property is true, the property can appear in the enumeration property of the object. The default is false.
Get the property descriptor
The Object.getOwnPropentyDescriptor() method returns the property descriptor corresponding to the own property on the specified object
var obj = {
name : '哈士奇'
}
/*
使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
Object.getOwnPropertyDescriptor(obj,prop)
* obj - 表示指定属性对应的目标对象
* prop - 表示获取描述符的目标属性名称
* 返回值 - 其属性描述符对象
* 如果
*/
var v =Object.getOwnPropertyDescriptor(obj,'name');
console.log(v)Copy after login
Set the property Descriptor optional key value value
var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
name : '阿拉斯加'
}
/*
Object.defineProperty(obj, prop, descriptor)方法
* 作用
* 用于定义目标对象的新属性
* 用于修改目标对象的已存在属性
* 参数
* obj - 表示目标对象
* prop - 表示目标对象的目标属性名称
* descriptor - 表示属性描述符，必须是对象格式
{
value : 值
}
* 返回值 - 返回传递的对象
*/
//修改name属性
Object.defineProperty(obj, 'name',{
value:'哈士奇'
} );
console.log(obj.name);//哈士奇
/*
同样都是为对象新增属性
1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
2.如果使用Object.defineProperty()方法新增属性
* 该新属性是不可修改、不可删除以及不可枚举的
*/
//新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
Object.defineProperty(obj,'age',{
value : 2
});Copy after login
Set the attribute descriptor optional key value weitable
var obj = {
// 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
value : '周芷若',
writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 周芷若
Object.defineProperty(obj, 'age', {
value : 18,
writable : true
});
console.log(obj.age);// 18
// 修改age属性值
obj.age = 80;
console.log(obj.age);// 80Copy after login
Set the attribute descriptor optional key value configuarble
var obj = {
// 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
value : '周芷若',
writable : true, // 控制当前属性是否可被修改
configurable : true // 控制当前属性是否可被删除
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 赵敏
// 删除name属性值
delete obj.name;undefined
console.log(obj.name);// undefinedCopy after login
Set the attribute descriptor enumerable
var obj = {
// 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
name : '张无忌'
}
Object.defineProperty(obj, 'name', {
value : '周芷若',
enumerable : false
});
console.log(obj.name);// 周芷若
/*
属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
* 仅能循环遍历对象中可被枚举的属性
* for...in语句
* keys()方法
* 可以循环遍历对象中可被枚举和不可被枚举的属性
* getOwnPropertyNames()方法
*/
for (var i in obj) {
console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);Copy after login
Set property descriptor accessor
In addition to being directly defined, the properties in the object can also be defined using accessors. The setter is a value function, using the set in the attribute descriptor; the getter is a value function, using the get in the attribute descriptor.
var value;
var obj = {
// 存取描述符中的get
get attr() {// 表示当前目标属性名称
return value;
},
// 存取描述符中的set
set attr(newValue) {// 表示当前目标属性名称
console.log('setter: ' + newValue);
value = newValue;
}
}
console.log(obj.attr);// undefined
obj.attr = 100;// "setter: 100"Copy after login
Tamper-proof object
The defined object can be modified at any time and anywhere by default, so a mechanism to prevent tampering is added and divided into three levels
Prohibit expansion: Prohibit the expansion of new properties and methods for objects
Sealed object: Only the value of the property is allowed to be read and written
Frozen object: No operations are allowed
Forbidden Extension
Sealing Object
Objet.seal() method is used to seal an object, prevent new properties from being added and mark existing properties as non-configurable, current properties The value can be written.
Object.Sealead() determines whether the object is sealed
Freeze Object
The above is the detailed content of A brief introduction to object-oriented and Object types in js (with code). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
