对象的基本知识,对构造函数的基本认识

370 阅读4分钟

JS的数据类型

原始数据类型(基本数据类型)

1.Number:用于表示数字。包括整数和浮点数,例如 42-1.233.14e-2(即 0.0314)等。

2.String:用于表示文本数据。字符串用单引号、双引号或模板字符串(反引号)括起来,例如 'Hello, World!'"JavaScript" 或 `Template string`

3.Boolean:用于表示逻辑值,只有两个值:true 和 false

4.Null:表示一个空值或没有对象值的情况。null 是一个字面量,用来表示空或不存在的引用。

5.Undefined:当一个变量声明了但没有赋值时,它的值就是 undefinedundefined 是一个全局变量,表示未定义的值。

对象类型(引用类型,复杂类型)

有哪些对象类型

  • Object:通用的对象类型,可以包含键值对(属性)。
  • Array:用于存储有序的元素集合。
  • Function:表示可执行的代码块,也可以作为对象来使用。
  • Date:表示日期和时间。
  • RegExp:表示正则表达式,用于字符串匹配和替换。

JS提供三种包装类对象

1.Number:用于表示数字。包括整数和浮点数,例如 42-1.233.14e-2(即 0.0314)等。

2.String:用于表示文本数据。字符串用单引号、双引号或模板字符串(反引号)括起来,例如 'Hello, World!'"JavaScript" 或 `Template string`

3.Boolean:用于表示逻辑值,只有两个值:true 和 false

啥是对象

在编程中,对象是一个封装了数据和操作的实体。这些数据通常被称为对象的“属性”或“字段”,而操作则被称为对象的“方法”或“函数”。

操作对象,对对象的基本认识

以下面这个对象 mrXu许先生为例

var mrXu = {
    name: 'xuyu',
    age: 18,
    sex: '男',
    run: function () {
        console.log('I am running');
    },
    drink: function () {
        console.log('I am drinking');
    }
}

修改属性

对象后加点再加想要修改的属性。如mrXu.age = 20就能修改掉原来age: 18这个属性

查询属性

使用 console.log()在括号中获取对象后打点后加你想要查询的属性。如,我想查询许先生的年龄,就可以用console.log(mrXu.age);

删除属性

这里需要用到 delete这个操作符。如果需要删除许先生的年龄,用delete mrXu.age

通过函数表达对象中属性的变化

var mrXu = {
    health:100,
    
    run: function () {
        console.log('I am running');
        this.health++
    },
    drink: function () {
        console.log('I am drinking');
         this.health--
    }
}
mrXu.drink();
// mrXu.run();

console.log(mrXu.health);

现在我们把其他属性先删除,在许先生这个对象里加入两个简单函数,通过函数控制对象中的属性。如上,当许先生run时健康+1,drink时健康-1

  • 注意:每个属性之间需要用,隔开;
  • 在js中,为了属性的成功访问,需要指明是什么对象下的属性。this 关键字用于引用调用函数的对象。在这个情况下,应该使用 this.health 来引用 mrXu 对象的 health 属性。
    即上面代码块中的this.health++ mrXu.health++

增加属性

可以通过两种语法来增加属性

var mrXu = {

}

var abc = 'girlFriend'
mrXu.abc = '章若楠'
//mrXu[abc] = '章若楠'
//或者 mrXu.girlFriend= '章若楠'
console.log(mrXu);
  • 点语法:在对象身上通过.的方式增加属性,会默认当成字符串来执行
var mrXu = {
 
}

//增加属性,Es6新增方法
mrXu['girlFriend'] = '章若楠'

console.log(mrXu);
  • 方括号语法:方括号语法允许我们使用变量或字符串字面量来动态地引用属性名

通过点语法来增加属性,如mrXu.girlFriend = '章若楠'就将girlFriend:'章若楠' 加入到了对象中,通过方括号语法mrXu['girlFriend'] = '章若楠'也能达到同样的效果。如果[]中不加'',那么需要将里面当做变量在处理,需要在前面先声明这个变量。大家可以仔细比较一下增加属性的这四种方法~

通过哪些方式能创建对象

1.创建对象字面量

var obj = {}
//let obj = {}
//const obj = {}
//`var`、`let` 和 `const` 是用于声明变量的关键字

对象字面量是一种表示对象的方式,它是用花括号 {} 包围的一系列属性的集合,每个属性由一个名称(键)和一个值组成,多个属性之间使用逗号 , 分隔。这是最直接和最常用的创建对象的方式

2. 调用系统自带的构造函数 new Object()

var obj2 = new Object()
//obj2.name = '' 添加属性
console.log(obj2);

任何数据类型都有一个内定的函数 Object()构造函数,如原始数据类型 String() Number() Boolean()

3. 调用自定义的构造函数

new一个函数一定会得到一个对象

function Car(color) {
  
}
var car = new Car()

console.log(car);
//最后打印的结果是Car{}

自己打造一个函数,通过构造函数来创建一个对象,适用于批量化,工厂化生产对象

function Car(color) {
    this.name = 'Su7'
    this.height = '1400'
    this.color = color
}

var car1 = new Car('red')//给构造函数传实参
var car2 = new Car('green')

console.log(car1, car2);

- 构造函数的本质--关键字new的作用

  1. new会在函数中创造一个this对象
  2. 执行函数中的逻辑代码(相当于在this对象上添加属性)
  3. return this 对象
function People(name, age, sex) {
    // var this = {
    //     name: '',
    //     age: '',
    //     sex: 
    // }

    this.name = name;
    this.age = age;
    this.sex = sex;

    // return this;
}

let p1 = new People('张三', 18, '男');  //实例对象

console.log(p1);

注释的内容即为new的作用