实例成员&静态成员、对象、内置构造函数

实例成员&静态成员

实例成员

通过构造函数创建的对象 称为实例对象

实例对象中的属性(实例属性)和方法(实例方法)称为实例成员

// 为构造函数传入参数，创建结构相同值不同的对象
// 构造函数创建的实例对象彼此独立互不影响
     function Person(name,age,gender){
        // 构造函数内部的this  就是实例对象
        // 实例对象中动态添加属性
        this.name = name
        this.age = age
        this.gender = gender
        // 实例对象中动态添加方法
        this.sing= function(){
            console.log("我会唱歌")
        }
     }

    //new的过程就是实例化  p---实例对象   name，age，gender 实例属性  sing 实例方法
    let p= new Person('刘德华',19,'女')
    console.log(p) 

    let p1 =new Person('李宁',23,'男')
    console.log(p1)
    console.log(p1.name)  //访问实例属性
    p1.sing()   //访问实例方法

静态成员

构造函数的属性和方法称为静态成员(静态属性和静态方法)

• 静态成员只能构造函数来访问

• 静态方法中的this指向构造函数

  Date.now() Math.PI Math.random()

  function Pig(name){
    this.name = name
  }
  Pig.eyes = 2  //静态属性
  Pig.sayHi=function(){  //静态方法
    // 静态方法中的this指向构造函数
    console.log(this)
  }
  console.log(Pig.eyes);  //2
  Pig.sayHi();

总结

• 实例成员是实例对象的属性和方法
• 静态成员是构造函数的属性和方法

对象

一切皆对象

引用类型

Object，Array，RegExp，Date，Function等都属于对象

基本数据类型

字符串，数值，布尔，undefined，null

我们有一些特殊情况，字符串，数值，布尔等基本数据类型也有专门的构造函数，这些我们称为包装类型

包装类型

String，Number，Boolean

包装类型执行过程：

• 创建一个String类型的实例
• 调用实例上的特定方法
• 销毁实例

        // 包装类型
        const str = "hello";
        console.log(str.length)

        // 我们有一些特殊情况
        // 字符串，数值，布尔等基本数据类型也有专门的构造函数，这些我们称为包装类型

        // 包装类型执行过程：
        // - 创建一个String类型的实例
        // - 调用实例上的特定方法
        // - 销毁实例

        // 包装过程
        const str1 = new String('hello1');
        console.log(str1.length)
        str1.substring()
        str1 = null

        /*
        用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
        */

js中几乎所有的数据都可以基于构造函数去创建，不同的构造器创建出来的数据拥有不同的属性和方法

整理：

引用数据类型属于对象； 数组，函数，正则，日期都属于对象

基本数据类型比如数字，字符串属于包装类型会包装成对象，所以字符串有属性和方法

内置构造函数

Object

Object是内置的构造函数，用于创建普通对象

推荐使用字面量声明对象 ，而不是Object构造函数

//通过构造函数创建普通对象
const user = new Object({name:'小米',age:13})

三个常用的静态方法：

• Object.keys() 获取对象中的所有属性 ，返回的是一个数组

// Object.keys() 获取对象中的所有属性
const arr = Object.keys(o)
console.log(arr);   //['name','age']

• Object.values() 获取对象中的所有属性值，返回的是一个数组

// Object.values() 获取对象中的所有属性值
const arr1 = Object.values(o)  // ['zs', 12]
console.log(arr1)

• Object.assign() 常用于对象拷贝

// Object.assign(目标对象，源对象) 常用于对象拷贝  
// assign 赋值的意思

const obj = {}
Object.assign(obj, o)
console.log(obj)   //{name: 'zs', age: 12}
obj.name = "小李"
console.log(obj)//{name: '小李', age: 12}
console.log(o)  //{name: 'zs', age: 12}
// 注意：// 拷贝对象是两个不同的对象不会相互影响

拼接字符串案例

const spec = { size: '40cm*40cm', color: '黑色' };
// 将size和color里面的值拼接为字符串之后，写到div标签里
// 1.对象.属性 进行拼接
// document.querySelector('.box').innerHTML = spec.size + '/'+spec.color
// 2.Object.values() +join('/')
document.querySelector('.box').innerHTML = Object.values(spec).join('/')

Array

Array是内置的构造函数，用于创建数组

推荐使用字面量创建数组 ，而不是Array构造函数

常见的实例方法

forEach,filter,map,reduce

数组常用方法

		// forEach 遍历数组   不返回数组，用于查找遍历数组元素
        // filter 过滤数组   返回新数组，返回的是筛选满足条件的数组元素
        // map   迭代数组  返回新数组，返回的是处理之后的数组元素
        // reduce 累计器  返回累计处理的结果，经常用于求和

        // arr.reduce(function(上一次值，当前值){},起始值)  

        const arr = [1, 5, 3, 7];
        // 1.没有初始值 
        // const total = arr.reduce(function(prev,current){
        //     console.log(1)  //3次
        //     return prev+current
        // })
        // console.log(total)  //16

        // 上一次值     当前值     返回值(第一次循环)
        //  1            5          6
        // 上一次值     当前值     返回值(第2次循环)
        // 6            3          9
        // 上一次值     当前值     返回值(第3次循环)
        //  9           7          16

        // 2.有初始值
        const total = arr.reduce((prev, current) => {
            console.log(2)  //4次
            return prev + current
        }, 10)
        console.log(total)//26

        // 上一次值     当前值     返回值(第一次循环)
        //  10            1          11
        // 上一次值     当前值     返回值(第2次循环)
        //   11           5          16
        // 上一次值     当前值     返回值(第3次循环)
        //  16           3         19
        // 上一次值     当前值     返回值(第4次循环)
        //  19           7         26

        // reduce执行过程
        // 1.如果没有起始值，则上一次值是数组的第一个数组元素的值
        // 2.每一次循环，把返回值作为下一次循环的上一次值
        // 3.如果有起始值， 起始值作为上一次值

        // arr.reduce(function(上一次返回值，当前数组元素){},初始值)  

String

Number