解开Js中对象的神秘面纱

解开Js中对象的神秘面纱

js对象的基本形式

对象的组成

• 除了原始值，其他都是对象
  • Undefined、 Null、 Boolean、 Number、 Symbol、 BigInt 和
    String
  • 可以使用typeof判断原始类型

语法

// 在对象⾥里里的函数叫⽅方法(methods)

// 对象的属性名是字符串串，属性的值可以是任意类型的

js对象中的常规操作

增减改查

• 查

  • 通过.运算符可以访问对象属性
  • 或者[]操作符访问，[]里面可以写变量，也可以写字符串

• 增

  • 通过.创建属性

• 改

• 删

  • 通过delete运算符

  • // 键值对
    // 键名就是属性名， 值就是属性值
    var person = {
    name: '张三',
    age: 29,
    job: 'teacher',
    eat: function() {}
    }
    // console.log(person.name)
    // var key = 'name'
    // console.log(person['name'])
    // for(var key in person) {
    // console.log(person[key])
    // }
    // person.sex = 1
    person['sex'] = 0
    person.name = 'Nick'
    delete person.sex
    console.log(person)
    person = {}
    

对象中的方法如何访问自己的属性

var obj = {
	name: 'Nick',
	sayHello: function() {
		// ⽅方法⾥里里怎么访问⾃自⼰己的属性
	}
}

• 通过this能够访问对象自己

  • var obj2 = {
    	name: 'Jack',
    	sayHello: function name(params) {
    		console.log('Hello, I am ' + this.name)
    	}
    }
    

js中创建对象的几种方法

对象字面量

• 声明一个对象，赋值给一个变量

构造函数

• Object
• 自定义构造函数（大驼峰）
  • this指向的是对象的本身
  • 使用new实例化一个对象，就像工厂一样

构造函数的参数应该怎么写

固定参数

function Car(name, price, size) {
	this.name = name
	this.price = price
	this.size = size
}

• 位置要严格对应

不定参数

function Car(obj) {
	this.name = obj.name
	this.price = obj.price
	this.size = obj.size
}

• 方便维护
• 利于用户使用

剖析js底层关键字new

• 没有new，直接调用构造函数

  • 构造函数内部的this指向的是window

  • function Student(obj) {
    	this.name = obj.name
    	this.score = obj.score
    	this.grade = obj.grade
    }
    var stu1 = Student({
    	name: 'Jack',
    	score: 88,
    	grade: 3
    })
    console.log(stu1) // 输出的是undefined，如果构造函数
    return this，则输出的是window对象
    

• 有new

  • 创建了一个空对象
  • 帮助我们吧对象返回回来
  • 改变了this的指向，指向了空对象
    • 小彩蛋：在构造函数里输出 this试试，然后对比有new没new