JS--Day21 (Object creation method, properties and use)

1. Three ways to create objects

// 1、简写
let o1 = {
    name:"张三疯",
    sex:"男",
    age:12,
    eat:function(){
    }
}
console.log("o1",o1);


// 2、构造函数
let o2 = new Object();
o2.name="梅超风";
o2.sex="女";
o2.age = 11;
console.log("o2",o2);


// 3、用Object.create;

let o3 = Object.create(o2);//创建o3时，传入o2：表示o3可以拥有o2的一切（属性和方法）。
o3.language = "js";
o3.writeCode = function(){
}
console.log("o3",o3);
console.log("o3.name",o3.name);
console.log("o3.sex",o3.sex);

2. The properties of objects and the use of their properties

①Properties of the object:

  1. Definition of attributes:

     1) The writing method of the object attribute is: enclosed in double quotes, if there are no double quotes, it will be added automatically when compiling.

     2) The properties of the object can use variables. Enclose it in square brackets.

               2.1), the value of the attribute name is a string.

               2.2), the value of the attribute name is Symbol (Symbol is a new basic data type in ES6)

let s = "sex";
  let s1 = Symbol();
  let o1 = {
    name: "张三疯",
    [s]: "男",
    [s1]: "我是唯一的",
    age: 12,
  };
  console.log(o1.sex);
  console.log(o1[s1]);

 2. Access to attributes:

    1), directly use the character string of the attribute name, written as: point

    2) Use variables for attribute names: the writing method is: square brackets.

 console.log(o1.name);
 console.log(o1[s]);
 console.log(o1["sex"]);
 console.log(o1["name"]); //用方括号把属性名包起来了，等价于：o1.name

 3. Example: use for in loop json object

 for (let key in o1) {
    console.log(o1[key]);
  }

② Supplement: Symbol

Symbol is a new basic data type in ES6, and the value of this data type is unique in the world.

The value is obtained through the Symbol function. The value obtained by the Symbol function is different every time.   

let s1 = Symbol();
let s2 = Symbol();
console.log(s1===s2);//false;
console.log("s1",s1);
console.log("s2",s2);

3. Static properties (prototype) of demo03Object

Static properties of Object: (properties of the class)

① Review: Known classes and objects.

Objects are instantiations of classes. Objects are created from classes.

Object: class

let o1 = new Object();//o1 is an object.

② Inform:

Attributes of a class: belongs to a class. When using it, point it out with the class name.

Attributes of the object: belong to the object, when used, use the object name to point out.

③Object class attribute (static attribute): prototype;

       1), prototype means prototype. Prototypes are a core feature of classes.

       2), each class has a prototype attribute. All content (properties and methods) in this property will be shared by its objects (instances).

       3), each class object (instance) has a __proto__ attribute, which points to the Prototype attribute of the class.

   console.log("Object.prototype",Object.prototype);    
   let o1 = new Object();
   console.log("o1",o1);
   o1.hasOwnProperty();
   console.log( o1.__proto__ ==  Object.prototype);//true。
   let o2 = new Object();
   console.log("o2",o2);
   o2.hasOwnProperty();
   console.log( o2.__proto__ ==  Object.prototype);//true。

4. Demo04 Supplement: Prototype and Prototype Chain

① Constructors are classes in JS

  1. In the initial design of js, there is no concept of class, only constructors, such as: the official Array, String, Date, RegExp, etc. are all constructors. When using let arr = new Array(); let d1 = new Date();

  2. Starting from ES6, there is the concept of class. Constructors used to be classes.

② Create objects (using constructors/classes);

     let arr1 = new Array();//arr1 is the object.

③ Prototype

   1. Each constructor (class) will have a prototype property. This property is the prototype.

   2. The object (instance) of the class will share the methods and properties on the prototype attribute of the class.

   3. Each object (instance) will have a __proto__ attribute, which points to the prototype attribute of the class (this realizes sharing)

   4. The properties and methods in the prototype of the class are the properties and methods of the instance.

   5. When an instance accesses a method (or attribute), first look for it in its own memory, and if it cannot be found, go to the prototype attribute of the class to find it.

//   示例1：
    console.log("Array",Array);
    console.dir(Array);
    console.log("Array.prototype",Array.prototype);
    let arr1 = new Array(12,23,34);
    arr1.push();//这就是类（构造函数）Array上prototype定义的方法

    let arr2 = new Array(5,6,7);
    arr2.push();//这就是类（构造函数）Array上prototype定义的方法

//  示例2：
    console.log("Date.prototype",Date.prototype); 
    let d1 = new Date();
    console.log("d1.getFullYear()",d1.getFullYear());

④ prototype chain

 1. All classes (such as: Array, Date, RegExp, etc.) come from (inherit) from Object.

 2. When an object accesses properties and methods,

     1) First search in the memory where you are, if you can't find it, then go to the prototype of the class to find it.

     2) If there is no class prototype, then go up one level (parent class), if not, keep looking up one level until the root Object.

     3) Call it if it is found, and report an error if it is not found (is not define; undefined, is not a function, etc.);

let d1 = new Date();
console.dir(Date);
d1.hasOwnProperty();
// console.log(d1.str);
// console.log(d1.fn);
let aaa = d1.str;
// d1.fn();

5. Static method of Object (defineProperty)

① Static method of Object: defineProperty;

Object.defineProperty(object, property name, property setting): You can define (add) properties to the object.

 1. For the properties defined by Object.defineProperty(), do some settings on the properties (such as: set the properties to be read-only).

  let o1 = {}; For example: add attribute sex to object o1; 

 Object.defineProperty(o1,"sex",{
    value:"男",
    writable:false //让sex属性只读。
  })
console.log(o1.sex);
o1.sex="女";
console.log(o1.sex);

 2. Object.defineProperty(); can define accessor properties.

let person = {
    _age:12//这个属性保存数据
};
// person.age = 250;//？？这样会导致，在程序里出现了不合法数据
// 给person增加一个属性age（用来完成读取属性 _age的值）。
Object.defineProperty(person,"age",{
    // 当修改age属性时，会调用set方法
    set:function(val){ //参数val就是赋的值。
        // console.log("set",val);
        if(val<0 || val>150){
            return;
        }
        this._age = val;
    },
    // 当读取（使用）age属性时，会调用get方法
    get:function(){
        // console.log("get");
        return this._age;//get方法必须要有返回值。
    }
})
person.age = 20;//修改age的值，会调用set方法
console.log("person.age",person.age);//读取age的值，会调用get方法
person.age = 250;
console.log("person.age",person.age);//读取age的值，会调用get方法

②Popularity: There are three properties of JavaScript objects:

 1. Named data attribute (the most commonly used): it is used to save a data, which is the most common attribute (that is, the attribute previously defined in the json object)

 2. Naming accessor attributes (key and difficult points):

    1) This property contains two functions: setter and getter.

    2), write: when assigning a value to a property, the setter method will be called

    3), read: When reading the property, the getter method will be called.

 3. Internal attributes (just understand):

    1), this attribute is generally enclosed in square brackets (such as: [[prototypt]]).

    2) This attribute cannot be accessed by code. However, general js will provide another attribute access (such as: __proto__)

console.dir(Array);

6. Static method of Object (keys)

Object.keys(object): Get all the keys of the object. The return value is an array containing the string representation of each key.

let o1 = {
    name:"张三疯",
    sex:"男",
    eat:function(){
    }
}
console.log(Object.keys(o1));//["name", "sex","eat"]
console.log(Object.keys(o1).length);//3

Seven.Object object (instance) method

hasOwnProperty (property): Determine whether the object has the property (not the property on the prototype)

let o1 = {
    name:"张三疯",
    sex:"男",
    eat:function(){
    }
}
console.log(o1.hasOwnProperty("name"));//true
console.log(o1.hasOwnProperty("eat"));//true
console.log(o1.hasOwnProperty("hasOwnProperty"));//false
console.log("Object.prototype",Object.prototype);

Eight. instanceof operator

instanceof: Determines whether the object is an instance of a certain class.

let o1 = {
    name:"张三疯",
    sex:"男"
}
console.log("o1.name",o1.name);
console.log(o1 instanceof Object);//true
let arr = [];//new Array();
console.log(arr instanceof Array);//true
let d1 = new Date();
console.log(d1 instanceof Date);//true
console.log(d1 instanceof Object);//true
class Person{
    constructor(){
        this.name="张三疯";
        this.sex="男"
    }
}
let p1 = new Person();
console.log("p1.name",p1.name);
console.log(p1 instanceof Person);//true
console.log("o1 instanceof Person",o1 instanceof Person);//false
console.log(p1 instanceof Object);//true