四天学会JS高阶(学好vue的关键)——构造函数&数据常用函数(理论+实战)(第二天)

一、对象创建引发构造函数产生

1.1 创建对象三种方式:

  1. 利用对象字面量创建对象
 const obj = {
   
   
            name: '佩奇'
        }

注:对象字面量的由来:即它是直接由字面形式(由源代码直接)创建出来的对象,而不是通过构造函数或者方法间接构成的,所以就叫做对象字面量。

  1. 利用 new Object 创建对象
   // 两种添加属性的方式
   // const obj = new Object()
        // obj.uname = '哈哈哈哈'
        // console.log(obj);
        const obj = new Object({
   
    uname: '哈哈哈哈' })
        console.log(obj);

注:当使用Object时,实际上是调用了js内置的一个构造函数并且通过new关键字来创建一个新的对象。
3. 利用构造函数创建对象 往下看。。。。。

1.2 构造函数

构造函数定义:就是一个函数,用来创建快速多个类似的对象,将多个对象的公共属性封装在一个函数里

注意:创建对象的时候首字母大写;使用函数创建对象通过new关键字操作符。

        //创建一个猪猪 构造函数
        function Pig (uname, age) {
   
   
            this.unmae = uname
            this.age = age
        }
        // 通过new关键字调用函数
        // 实例化构造函数
        // console.log(new Pig('佩奇', 6))
        const p = new Pig('佩奇', 6)
        console.log(p);

另外:同new Object()、 new Date() 一样都是实例化构造函数,js内置了Date、Object构造函数,然后通过new关键字实现实例化函数,最后实现实例化对象

const date = new Date('2021-3-4')
        console.log(date);
 function Goods (name, price, count) {
   
   
            this.nam = name
            this.price = price
            this.count = count
        }
        const mi = new Goods('小米', 1999, 20)
        console.log(mi)
        const hw = new Goods('华为', 1999, 50)
        console.log(hw)

总结:
1.new关键字调用函数的行为被称为实例化
2.构造函数无return,构造函数自动返回构建的新的对象。
什么时候需要return?就是函数比起输出结果,将返回结果给其他程序,然后程序使用这个结果做其他事情更重要的时候。这个具体见小编的 js——函数篇。
3.实例化构造函数时没有参数时可以省略 ()

实例化执行过程

①构造函数先调用,加上new,立刻创建一个空对象 ②this指向空对象
③执行构造函数代码,利用this,添加属性.(具体是通过形参传入实参, this指向新对象,新对象添加一个name属性
这样实参通过形参就传入到了对象中 生成了对象属性 对象也有了 属性也有了 ,构造函数就会自动返回一个新的对象 返回的新对象 由new Pig接收。)
④.返回新对象

1.3 实例成员 静态成员

实例成员
通过构造函数创建的对象称为实例对象;
实例对象中的属性和方法称为实例成员 (实例属性 实例方法)

下面举一个不含有参数的利用构造函数创建实例对象:

function Pig () {
   
   
            this.name = '佩奇'
            this.sayHi = function () {
   
   
                console.log('你好')
            }
        }
        const p = new Pig()
        console.log(p.name)
        p.sayHi()

注:

  1. 实例对象的属性和方法即为实例成员
  2. 为构造函数传入参数,动态创建结构相同但值不同的对象
  3. 构造函数创建的实例对象彼此独立互不影响

静态成员
构造函数的属性和方法被称为静态成员 静态成员只能构造函数访问。

 function Person () {
   
   
            // 省略实例成员
        }
        // 静态属性
        Person.eyes = 2
        Person.arms = 2
        // 静态方法
        Person.walk = function () {
   
   
            console.log('人嗯呢')
            console.log(this.eyes)
        }
        new Person()
        console.log(Person.eyes)
        console.log(Person.arms)
        // 死记硬背:遇到方法一定要想到需要调用 并且不用打印调用  方法里面有结果的输出
        // console.log(Person.walk);//错误
        Person.walk()

说明:

  1. 构造函数的属性和方法被称为静态成员
  2. 一般公共特征的属性或方法静态成员设置为静态成员
  3. 静态成员方法中的 this 指向构造函数本身

二、内置构造函数

一切皆对象

我发现因为构造函数的存在,所以都可以new出来一个实例对象


主要的数据类型有6种:
基本数据类型:字符串、数值、布尔、undefined、null
引用数据类型:对象、数组等。
字符串.Length

 // const str = 'pink'
        // // 有属性
        // console.log(str.length)
        // const num = 12
        // // 有方法
        // console.log(num.toFixed(2));
        // js底层完成 把简单数据类型包装成了引用数据类型
        // const str = new String('pink')

为什么任何数据都有属性和方法?

原理:其实在js的底层 将字符串类似转化为了对象,也就存在了属性和方法
基本包装类型就是基本数据类型包装成了复杂数据类型
实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为包装类型。
JS中几乎所有的数据都可以基于构成函数创建
包装类型
 String,Number,Boolean 等基本数据类型

2.1 Object

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

使用 Object 创建对象

const aa = new Object({
   
    uname: '哈哈', age: 18 })
console.log(aa);	

三个常用静态方法(静态方法就是只有构造函数可以调用的,在这里是只有Object可以调用的)

 const o = {
   
    uanme: 'pink', age: 18 }
        // 1.Object.keys 静态方法获取对象中所有属性(键) 返回数组
        console.log(Object.keys(o))
        // 2.Object.values 静态方法获取对象中所有属性值 返回数组
        console.log(Object.values(o))
        // 3.Object. assign 静态方法常用于对象拷贝 经常使用的场景给对象添加属性
        const oo = {
   
   }
        Object.assign(oo, o)
        console.log(oo)
        // 通过Object给对象添加属性
        Object.assign(o, {
   
    gender: '女' })
        console.log(o)
        console.log(Object.keys(o));

2.2 Array

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

const arr = new Array(3, 5)
console.log(arr);

创建数组建议使用字面量创建,不用 Array构造函数创建

数组常见实例方法:

数组中的reduce方法:
这里不知道大家会不会有个问题,为什么function函数没有被调用呢,就能够返回值,这是因为数组中的reduce方法是js内置函数自定义的方法,不需要我们返回,由内部操作,我们只需要知道function被当做参数传入的时候是回调函数,最后返回的结果用一个变量来接收即可。

        // 数组reduce方法 两个参数  回调函数  初始值
        // arr.reduce(function (上一次值,当前值) { }, 初始值)
        const arr = [1, 5, 7]
        // 1.没有初始值
        const total = arr.reduce(function (prev, current) 
转载请说明出处内容投诉
CSS教程网 » 四天学会JS高阶(学好vue的关键)——构造函数&数据常用函数(理论+实战)(第二天)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买