实例成员&静态成员
实例成员
通过构造函数创建的对象 称为实例对象
实例对象中的属性(实例属性)和方法(实例方法)称为实例成员
// 为构造函数传入参数，创建结构相同值不同的对象
// 构造函数创建的实例对象彼此独立互不影响
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(上一次返回值，当前数组元素){},初始值)
