JS custom object

Article Directory

1. What is an object

1. Object refers to a specific things , the object of the properties and methods consisting of

Attributes: the characteristics of things (common nouns)
Method: the behavior of things (common verbs)
Object expression structure in JS is clearer and more powerful

Two. Three ways to create objects

1. Use literals to create objects.
Object literals: curly braces {} which contain attributes and methods
{} which contain the form of key-value pairs

Key: equivalent to the attribute name
Value: equivalent to the attribute value, can be any type of value

Object call

Objects inside the property call: Object attribute name,
There is another way to call: object ['attribute name'], add quotation marks
Inside the object method call: Object method name (), put parentheses

The code is demonstrated as follows

 <script>
        // 1.利用字面量创建对象{}
        // var obj = {}；创建了一个空的对象
        var obj = {
                // 属性
                unme: '浩哥',
                age: 20,
                sex: '男',
                // 方法 方法后面跟函数 因为函数就是用来做什么事情的实现什么功能的 
                sayHi: function() {
                    console.log('你好啊对象！！！');
                }
            }
            // 注意点(1)里面的属性或者方法采取键值对的形式 键 属性名 : 值 属性值
            // (2)多个属性用逗号隔开
            // (3)方法冒号后面跟的是匿名函数
            // 2.对象的使用
            // (1)调用对象的属性 采取 对象名.属性名 这个点.我们理解为 的
        console.log(obj.unme); //浩哥
        // (2) 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']); //20
        // (3) 调用对象的方法 sayHi 对象名.方法名() 别忘记小括号
        obj.sayHi();
    </script>

2. Use new Object to create an object

The code is demonstrated as follows

  <script>
        var obj = new Object(); //创建了一个空的对象
        // 属性
        obj.uname = '浩哥';
        obj.age = 20;
        obj.sex = '男';
        // 方法
        obj.sayHi = function() {
                console.log('你好啊 对象!!!');
            }
            // 注意点
            // (1) 我们利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
            //（3）O要大写
        console.log(obj.uname);
        console.log(obj.age);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

3. Use the constructor to create objects.
Why do we need a constructor?

Because we create an object at a time, the properties and methods in it are a lot of the same, we can only copy, so we can use the method of the constructor to repeat the same code, we call this function a constructor, and because of this Functions are not the same, what is encapsulated is not ordinary code, but objects
The constructor is to abstract some of the same properties and methods in our object and encapsulate them in a function

Code demo

 <script>
        //1. 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {};
        // }
        // new 构造函数名()
        // 2.代码演示
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex
            this.sing = function(guitar) { //guitar = 弹吉他
                console.log(guitar);
            }

        }
        var hh = new Star('浩哥', 20, '男')
        console.log(hh.name);
        console.log(hh['age']);
        hh.sing('弹吉他')
        var ldh = new Star('刘德华', 45, '男')
        console.log(ldh.name);
        console.log(ldh['age']);
        ldh.sing('唱歌')
            // 3.注意点
            // (1)构造函数首字母大写
            // (2)构造函数不需要return返回结果
            // (3)调用构造函数 必须使用new
            // (4) 我们只需要 new Star() 调用函数就可以创建一个对象了
            // (5) 属性和方法必须加this.
    </script>

Constructor and object

The constructor, such as Stars(), abstracts the public part of the object and encapsulates it in a function. It generally refers to a certain category
Create an object, such as new Stars(), which specifically refers to a certain one. The process of creating an object through the new keyword is also called object instantiation.

Insert picture description here

Three. New keyword execution process

Create a new empty object in memory
Let this point to this new object
Execute the code in the constructor to add properties and methods to this new object
Return this new object (return is not required in all constructors)

Four. Traverse the object

The for...in statement is used to loop the attributes of an array or object

code show as below

  <script>
        var obj = {
                unme: '浩哥',
                age: 20,
                sex: '男',
                sayHi: function() {
                    console.log('你好啊对象！！！');
                }
            }
            语法结构
		for (变量 in 对象名字) {
		// 在此执行代码
		}

            // 利用for..in来遍历对象
        for (var k in obj) {
            console.log(k); // k 变量 输出 得到的是 属性名; 注意k 是不需要赋值的
            console.log(obj[k]); // obj[k] 输出得到的是 属性值  注意括号里面是没有引号的
        }
        // 我们使用 for in 里面的变量 喜欢写出 k 或者 key 也可以写成其他的 这只不过是前端人员习惯用的
    </script>