面向对象-构造函数和引用方法

对象

• 对象：特指，类中的某个实例，由属性和方法构成。
• JS中一切皆对象，也允许自定义对象。

1. 构造函数

1.1 构造函数

• 字面量创建对象（回顾）

 <script>
    let obj = {
        name: '酷盖',
        age: 23,
        sex: '男',
        num: function () {
            let year = 2022
            console.log(year - obj.age)
        }
    }


    // 1.访问属性
    // console.log(obj.k)  此方法不能访问对象属性
    console.log(obj.name)
    console.log(obj['name'])

    // 2.访问方法
    obj.num()
    console.log(obj.num)

    // 3.遍历对象
    for (let key in obj) {
        //  key==='name'==='age'==='sex'==='num' 
        console.log(key) // 遍历属性名
        // obj[key]===obj['name']===obj['age']===obj['sex']===obj['num']
        console.log(obj[key])  // 遍历属性值
    }

    // 4.遍历数组对象
    let students = [
        { name: '酷盖', age: 23, gender: '男', hometown: '河南省' },
        { name: '奶盖', age: 29, gender: '男', hometown: '重庆市' },
        { name: '小摩托', age: 21, gender: '女', hometown: '四川省' },
    ]

    // 此时 key为数字类型，相当于i
    for (let key in students) {
        console.log(key) // key===0===1===2
        console.log(students[key])  // students[key]===students[0\1\2]
        console.log(students[key].name) // students[key].name=== students[0\1\2].name
    }
    
    //字面量定义属性和方法容易出现属性和方法重写问题
 </script>

• 构造函数创建对象

<script>
    // 构造函数 : 内置构造函数 \ 自定义构造函数
    // 内置构造函数 :Object() 创建对象 
    // 实例化对象：使用 new 关键字调用函数
    let obj = new Object()
    obj.name = '赵盼儿'
    obj.age = 21
    console.log(obj)

    let obj1 = new Object({ name: '顾千帆', age: 23 })

    // 1.若构造函数不需要参数，()可省
    let obj2 = new Object

    // 2.自定义构造函数 函数名首字母大写
     function Person(uname, age, sex) {

        // 给Person设置属性和方法 this指向对象Person
        this.uname = uname
        this.age = age
        this.sex = sex
        this.borth = function () {
           console.log(`我今年${this.age}岁了`)
        }
    }
    // 实例化对象 
    // 构造函数创建的实例对象彼此独立互不影响    
    let Person1 = new Person('酷盖', 23, '男')
    console.log(Person1)
    Person1.borth()

    let Person2 = new Person('奶盖', 21, '女')
    console.log(Person2)
    Person2.borth()

	// 构造函数内部的 return 返回的值无效，默认返回一个对象。
</script>

1.2 instanceof 和 constructor

<script>
    // 1. instanceof : 用于检测实例对象对应的构造函数 (判断一个对象是否是另一个构造函数的实例对象 )   返回布尔值
    // 语法：对象 instanceof 构造函数名
    function Person(uname, age, sex) {
        this.uname = uname
        this.age = age
        this.sex = sex
        this.borth = function () {
            console.log(`我今年${this.age}岁了`)
        }
    }

    let Person1 = new Person('酷盖', 23, '男')
    console.log(Person1 instanceof Person)

    // 2. constructor : 指向构造函数本身
    console.log(Person1.constructor)
</script>

1.3 实例成员和静态成员

<script>
    // 构造函数创建的对象叫做实例对象，实例对象本身存在的属性和方法叫做实例成员
    // 1.实例成员 
    function Person(uname, age, sex) {
        // 以下属性和方法都是实例成员
        this.uname = uname
        this.age = age
        this.sex = sex
        this.borth = function () {
            console.log(`我今年${this.age}岁了`)
        }
    }
    // 实例化对象
    let obj = new Person('酷盖', 23, '男')

    // 2.静态成员 直接给构造函数添加的属性和方法叫静态成员(静态属性和静态方法)
    // 以下都叫静态成员
    Person.adress = '四川省'
    Person.id = 2019782016
    Person.nationalit = function () {
         console.log('english')
    }

    // 3. 实例成员只能由实例对象访问，静态成员只能由构造函数访问

    // 访问实例成员
    console.log(obj.uname)
    console.log(Person.uname)  //undefined

    // 访问静态成员
    console.log(Person.id)
    console.log(obj.id)    //undefined

    // 4.一般公共特征的属性或方法设置为静态成员

    // 5. 静态成员方法中的 this 指向构造函数本身
    Person.say = function () {
        // this指向Person
        console.log(`我的id是${this.id}`)
    }
    Person.say()
</script>

1.4 原型对象

<script>
    // 所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法（参看菜鸟教程中详解）
    function Person(uname, age, sex) {
        this.uname = uname
        this.age = age
        this.sex = sex
        this.borth = function () {
            console.log(`我今年${this.age}岁了`)
        }
    }
    // 实例化对象
    let obj = new Person('酷盖', 23, '男')

    // 使用prototype 属性可以给对象的构造函数添加新的属性和方法
    Person.prototype.adress = '四川省'
    Person.prototype.nationality = function () {
        console.log('english')
        }

    // 使用prototype添加的成员是实例成员，实例对象可访问
    console.log(obj.nationality)
    obj.nationality ()
    </script>

通常使用构造器（函数体）定义属性，使用原型对象（prototype）定义方法；如此，使得代码根据可读性。

---

2. 数据类型和方法

• 简单数据类型：字符串、数字、布尔、undefined 和 null 。
• 数据传递：变量传递给另一个变量，分为值传递和引用传递：
  – 值传递：传递的是数据。（简单类型）
  – 引用传递：传递的是地址。（引用类型）

2.1 引用类型

引用类型：对象、数组、正则、Date等。

2.1.1 Object

Object ：内置构造函数，用于创建普通对象。任何一个对象都是Object 构造函数的实例化对象。

静态方法	描述
Object.assign()	创建新的对象
Object.keys()	获取对象中所有属性名，返回数组
Object.values()	获取对象中所有属性值，返回数组

静态方法只有构造函数能调用。

2.1.2 Array

Array：内置构造函数，用于创建数组。任何一个数组都是Array构造函数的实例化对象。

let arr = new Array(元素，元素，，，)
// 当只有一个参数时，表示长度
let arr = new Array(length)  

实例方法	描述
.forEach（）	遍历数组
.filter()	筛选所有满足条件的数组元素，并以数组形式返回
.map()	每一个数组元素都将执行一遍回调函数，结果以数组形式返回
. join()	拼接数组元素
.concat()	合并数组
.sort()	对数组元素排序
.splice()	删除或替换原数组单元
.push()	添加数组元素
.indexOf()	检索数组中某个元素第一次出现的索引位置，找不到返回-1
.lastIndexOf()	检索数组中某个元素最后一次出现的索引位置，找不到返回-1
.reverse()	翻转数组
静态方法 .from()	伪数组转成数组

了解更多

<script>
    // 1.concat() 合并数组
    let arr1 = [1, 2, 3, 4, 5]
    let arr2 = ['上', '山', '打', '老', '虎']
    let Arr = arr1.concat(arr2)
    console.log(Arr)

    // 2.join() 拼接数组单个元素成为字符串
    console.log(arr1.join('-'))
    console.log(arr1.join('|'))
    console.log(arr2.join(''))
    console.log(arr2.join(' '))

    // 3.reverse() 翻转数组
    console.log(arr1.reverse())

    // 4.indexOf 和lastIndexof
    let arr = [1, 2, 3, 5, 8, 5, 2, 7, 9, 5]
    // 返回元素第一次出现的位置
    console.log(arr.indexOf(5))
    // 返回元素最后一次出现的位置
    console.log(arr.lastIndexOf(5))
    // 查无此元素则返回-1
    console.log(arr.indexOf('wyb'))
    console.log(arr.lastIndexOf('yb'))

    // 5.sort() 给数组排序,不是大小排序，ASCALL编码排序，像比较字符串大小那样
    let arr3 = [123, 45, 66, 91, 27, 15, 26, 13, 4, 0]
    console.log(arr3.sort())
    // 正序排列 在方法里调用一个回调函数
    let re = arr3.sort(function (a, b) { return [a - b] })
    console.log(arr3)
    // 反序排列
    let ret = arr3.sort(function (a, b) { return [b - a] })
    console.log(arr3)

    // 6.静态方法 Array.isArray() 用于判断一个变量是否是数组 返回布尔值
    let m = 1
    console.log(Array.isArray(m))

    // 7. 静态方法 Array.from(伪数组) 将伪数组转换为真数组，但是伪数组中必须有length属性
    // 有的伪数组会返回length，无则添加

    // 8.forEach() 遍历数组
    let arr4 = [1, 2, 3, 4, 5]
    arr4.forEach(function (item, index, obj) {
        // 第一个参数 代表当前元素
        // 第二个参数 代表元素下标
        // 第三个元素 代表数组本身
        // 根据需要写参数的个数
        console.log(item, index, obj)
    })

    let arr5 = [
        { unaem: '一宝', age: 23, sex: '男' },
        { unaem: '奶盖', age: 23, sex: '男' },
        { unaem: '蓝忘机', age: 23, sex: '男' },
        { unaem: '美杜莎', age: 19, sex: '女' },
        { unaem: '酷盖', age: 23, sex: '男' }
    ]
    arr5.forEach(item => {
        console.log(`我叫${item.unaem},性别${item.sex},今年${item.age}岁了`)
    })

    // 9. find()和 findIndex()
    let arr6 = [1, 4, 7, 9, 2, 5, 8, 7, 9]
    // find() 查找满足的条件元素并返回 ,不满足则 undefined
    let re1 = arr6.find(function (item, index, obj) {
        return item > 7
    })
    console.log(re1)

    // arr.findIndex() 查找首次满足条件的元素，并返回索引号,不满足返回-1
    let re2 = arr6.findIndex(function (item, index, obj) {
        return item === 7
    })
    console.log(re2)

    // 10.some() 查找是否有元素满足条件，返回布尔值
    let re3 = arr6.some(function (item, index, obj) {
        return item === 7
    })
    console.log(re3)

    // 11.every() 检测是否所有元素都满足条件，返回布尔值
    let re4 = arr6.every(function (item, index, obj) {
        return item > 1
    })
    console.log(re4)

    // 12.filter() 筛选所有满足条件的元素，并以数组形式返回
    let re5 = arr6.filter(function (item, index, obj) {
        return item > 3
    })
    console.log(re5)

    // 13.map() 每一个元素都将执行一遍回调函数，结果以数组形式返回
    let re7 = arr6.map(function (item, index, obj) {
        return item * 2
    })
    console.log(re7)
</script>

2.1.3 RegExp

RegExp：内置的构造函数，用于创建正则表达式。任何一个正则都是RegExp 构造函数的实例化对象。

let re = new  RegExp(/123/)

2.2 包装类型

在 JS 中的字符串、数值、布尔类型数据是使用 Object 构造函数“包装”来的，被称为包装类型； 具有对象特征。

2.2.1 String

String ：是内置的构造函数，用于创建字符串。

属性/实例方法	描述
.length	获取字符串的度长
.split()	将字符串拆分成数组
.toUpperCase()	将字母转换成大写
.toLowerCase()	将字母转换成小写
.slice()	用于字符串截取
.trim()	去除字符串两端空格键
.indexOf()	查找元素首次出现的索引值，找不到返回-1
.lastIndexOf()	查找元素尾次出现的索引值，找不到返回-1
.startsWith()	检测是否以某字符开头
.endsWith()	检测是否以某字符结尾
.replace()	用于替换字符串，支持正则匹配

了解更多

<script>
    // 字符串截取
    let str = 'welcometowonderland'

    // 1.slice()
    // slice(start) start代表索引号,当只有一个参数时，表示从这个索引号开始，一直截取到最后
    console.log(str.slice(3))
    // slice(start,end) 从start位置开始，截取到end位置，end位置上的值保留
    console.log(str.slice(3, 9))
    console.log(str.slice(9, 3)) // 截取不成功

    // 2.substring() 用法和slice一样，不同之处在于当有两个参数时能自动识别大小，并将较小的索引号赋给start
    console.log(str.substring(9, 3))

    // 3.substr(start,length) 表示从start位置其起往后截取lengh个字符
    console.log(str.substr(3, 4))
</script>

2.2.2 Number

Number ：是内置的构造函数，用于创建数值。

let num = new Number(1)

// num.toFixed(number):用于保留number位有效数字
let num1 =3.1415926
console.log(num1.toFixed(2))

2.2.3 Boolean

Boolean : 是内置的构造函数，用于创建布尔值。

2.3 公共方法

方法	描述
.valueOf()	获取原始值
.toString()	转换为字符串

undefined和null不能使用以上两个方法