Home > Web Front-end > JS Tutorial > What is a js object? Introduction to js objects (with code)

What is a js object? Introduction to js objects (with code)

不言
Release: 2018-08-14 09:55:40
Original
3311 people have browsed it

This article brings you what is a js object? The introduction of js objects (with code) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is an object

In JavaScript, an object is like an entity with separate properties and types. A cup is an object. The cup has attributes such as color and weight. Likewise, a JavaScript object has properties that define its characteristics.
A method is a function associated with an object, or in other words, a method is an object property whose value is a function.
Objects can be divided into the following categories

  • Built-in objects/native objects

are predefined objects in the JavaScript language

  • Host object

is an object provided by the JavaScript running environment

  • Custom object

It is an object created by the developer independently

Object object

The Object type is a reference type. But the Object type is the parent of all types in JavaScript (all types of objects can be the properties and methods of Object)

Creating objects

/*
* 1. 对象的初始化器创建方式
*     var 对象名={
*      属性名 : 属性值
*      方法名 : function{
*         方法体
*      }
*    }
*/
var obj = {
    name : '九筒',
    age : 2,
    sayYou : function () {
        console.log('火锅')
    }
};

/* 2. 对象的构造函数方式
*      * 利用所有的引用类型创建对应的对象->具有具体的类型
*        var num = new Number;//number类型
*        var str = new String;//string类型
*        var boo = new Boolean;//boolean类型
*      * 利用Object作为构造函数创建对象
*        var 对象名 = new Object();
*        var 对象名 = Object();
*/
var num = new Number();
var str = new Storage();
var boo = new Boolean();

var obj2 = new Object();
var obj3 = Object();

/*   利用Object.create创建对象
*      var 对象名 = Object.create(null) -> 创建一个空对象
      var 对象名 = Object.create(obj)
      * obj - 表示另一个对象
      * 特点 - 当前创建的新对象拥有与obj对象相同的属性和方法*/
var obj4 = Object.create(null);
var obj5 = Object.create(obj);
Copy after login

Properties of objects

Define the properties of the object

The properties of the object are like variables attached to the object

/*对象介意定义多个属性
*  属性之间使用逗号分开*/
var obj = {
    name : '吴凡',
    age : 23,
    book : function () {
        console.log('暗毁')
    }
};
Copy after login

Calling the properties of the object

/*  调用对象的属性
*     对象名.属性名
*     不适用于复杂命名的属性名称*/
console.log(obj.name);

/*   对象名[属性名]-通用方式
     适用于复杂命名的属性名称
*     */
console.log(obj['name']);//属性名是字符串形式
Copy after login

Add, delete, and modify the properties of the object

var obj = {
    name : '火锅',
    variety : '比熊',
    age : function () {
        console.log('3')
    }
}
   /* 新增对象的属性
   *    1对象名.新的属性名 = 属性值
   *    2对象名[新的属性名] = 属性值*/
obj.col='白色';
console.log(obj.col);//白色

   /*删除对象的属性
   * delete 对象名.属性名
   * delete 对象名[属性名]*/
delete obj.col
console.log(obj.col);//undefined

  /*修改对象的属性
  * 对象名.已存在的属性名 = 属性值
  * 对象名[已存在的属性名] = 属性值*/
obj.name = '九筒';
console.log(obj.name);//九筒
Copy after login

Detecting the properties of objects

var obj = {
    name : '火锅',
    variety : '比熊',
    age : function () {
        console.log('3')
    }
};
console.log(obj.name)

/*   1. 判断对象的属性值是否为undefined*/
if (obj.name !==undefined){
    console.log('obj对象name属性存在')
}else{
    console.log('obj对象name属性不存在')
}

/*   2. 判断对象的属性值,先转换为boolean类型*/
if (obj.name){
    console.log('obj对象name属性存在')
}

/*   3. 利用in关键字进行判断*/
if ('name' in obj){
    console.log('obj对象name属性存在')
}else{
    console.log('obj对象name属性不存在')
}

/*   4. Object类型提供了hasOwnProperty()方法*/
if (obj.hasOwnProperty('name')){
    console.log('obj对象name属性存在')
}else{
    console.log('obj对象name属性不存在')
}
Copy after login

Convenience properties

var obj = {
    name : '小薄荷',
    age : '0.3',
    variety : function () {
        console.log('萨摩耶')
    }
};
// 1.for...in语句
for (var objAttr in obj) {
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 2.Object类型提供了keys()方法 - 只能遍历可枚举的属性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 3.Object类型提供了getOwnPropertyNames()方法 - 包括不可枚举的属性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}
Copy after login

Methods of objects

Methods for calling, adding, modifying, and deleting objects

The methods and attributes for calling, adding, modifying, and deleting objects are basically the same

var obj = {
    name : '火锅',
    variety : '比熊',
    age : function () {
        console.log('3')
    }
}

/*调用对象的方法*/
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj['sayMe']();

/*新增对象的方法*/
// 1.对象名.新的方法名 = function(){}
obj.name = function(){
    console.log('九筒');
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}

/*修改对象的方法*/
// 1.对象名.方法名 = function(){}
obj.name = function(){
    console.log('九筒');
}
// 2.对象名[方法名] = function(){}

/*删除对象的方法*/
//1.delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法 -> 报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
// 2.delete 对象名[方法名]
Copy after login

Related recommendations:

Summary of character methods and string operation methods in js (with code )

Analysis of common problems in the http proxy library http-proxy in nodejs

The above is the detailed content of What is a js object? Introduction to js objects (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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