JS--Day21(对象Object创建方式，属性及使用)

一.对象的三种创建方式

// 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);

二.对象的属性及其属性的使用

①对象的属性：

  1、属性的定义：

     1）、对象属性的写法是：用双引号括起来，如果没有带双引号，在编译时，会自动加上。

     2）、对象的属性可以使用变量。此时用方括号括起来。

               2.1)、属性名的值是字符串。

               2.2）、属性名的值是Symbol（Symbol是ES6新增一种基本数据类型）

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

 2、属性的访问：

    1)、直接使用属性名的字符串，写法是：点

    2）、属性名使用变量：写法是：方括号。

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

 3、示例：用for in 循环json对象

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

②补充：Symbol

Symbol是ES6新增一种基本数据类型， 该数据类型的取值是全球唯一。

值是通过Symbol函数获取的。每次用Symbol函数获取的值都不一样。   

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

三.demo03Object的静态属性（prototype）

Object的静态属性：（类的属性）

①回顾：已知类和对象。

对象是类的实例化。对象是由类创建出来的。

Object：类

let o1 = new Object();//o1是对象。

②告知：

类的属性：隶属于类。使用时，用类名 点 出来。

对象的属性：隶属于对象，使用时，用对象名 点 出来。

③Object类的属性（静态属性）：prototype；

       1)、prototype是原型的意思。原型是类的核心特性。

       2）、每个类都有一个prototype属性。该属性里的所有内容（属性和方法）会被它的对象（实例）共享。

       3）、每个类的对象（实例）都有一个__proto__的属性，该属性指向类的Prototype属性。

   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。

四.demo04补充：原型和原型链

①在JS中构造函数就是类

  1.在js最初的设计中，没有类的概念，只有构造函数，如：官方提供的 Array，String，Date，            RegExp等等都是构造函数。使用时 let arr = new Array(); let d1 =new Date();

  2.在ES6开始，就有类的概念。曾经的构造函数都是类。

②创建对象（用构造函数/类）；

     let arr1 = new Array();//arr1就是对象。

③原型

   1.每个构造函数（类）都会有一个prototype属性。这个属性就是原型。

   2.类的对象（实例）会共享类的prototype属性上的方法和属性。

   3.每个对象（实例）会有一个__proto__属性，该属性指向类的prototype属性（这就实现了共           享）

   4.类的prototype里的属性和方法就是实例的属性和方法。

   5.当实例访问方法（或者属性）时，先在自己的内存中寻找，如果找不到，就去类的prototype         属性上去找。

//   示例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());

④原型链

 1、所有的类（如：Array，Date，RegExp等等）都是来自（继承）于Object。

 2、当对象访问属性和方法时，

     1）、先在自己所在内存中，寻找，如果找不到，那么就去类的prototype上找。

     2）、如果类 prototype上没有，那么，朝上一级（父类），如果还没有，就一直朝上一级寻                    找，直到最根的Object。

     3）、找到了就调用，找不到就报错（ is not define；undefined，is not a function等等）；

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

五.Object的静态方法（defineProperty)

①Object的静态方法：defineProperty ；

Object.defineProperty(对象，属性名，属性的设置):可以给对象定义（增加）属性。

 1、Object.defineProperty()定义的属性，对属性做一些设置（如：设置属性只读）。

  let o1 = {};  如：给对象o1增加属性sex； 

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

 2、Object.defineProperty();可以定义访问器属性。

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方法

②普及：JavaScript对象的属性有三种：

 1、命名数据属性(最常用)：就是用来保存一个数据，这是最常见的属性（也就是之前在json对象中定义的属性）

 2、命名访问器属性（重点和难点）：

    1）、这种属性，里面包含两个函数：setter和getter。

    2）、写：在给属性赋值时，会调用setter方法

    3）、读：在读取属性时，会调用getter方法。

 3、内部属性(了解就行)：

    1）、这种属性一般用双方括号括起来（如：[[prototypt]]）。

    2）、这种属性不能用代码的方式访问。但是，一般js都会提供另外一个属性访问（如：                           __proto__）

console.dir(Array);

六.Object的静态方法（keys)

Object.keys(对象)：获取对象的所有的键。返回值是个数组，数组里是每个键的字符串形式。

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

七.Object的对象（实例）的方法

hasOwnProperty(属性)：判断对象是否具有该属性（不是原型上的属性）

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);

八.instanceof运算符

instanceof：判断对象是否是属于某个类的实例。

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