js面向对象学习1

100 阅读3分钟

一、对象类型

1.1、简介

  • javascript中,有一种数据类型object类型,就是对象类型
  • 对象类型是一种存储键值对(key-value) 的数据类型;

1.2、写法

  • 对象类型可以使用{}来创建,里面包含的是键值对{key:value}
  • 键值对可以是属性和方法(在对象中的函数被称为方法);
  • 其中key是字符串,但一般不需要使用""包裹(除非关键字是两个单词),它的类型是它的值的类型;
  • value可以是任意类型,包括基本数据类型,函数类型,对象类型等

二、创建对象和使用对象

2.1、创建对象的三种方式

  • 1、使用对象字面量(Object Literal)

    • 通过{} ,属性之间通过逗号分割的;
    var obj = {
        name: "jack",
        age: 21,
        friend: {
            name: "Alice",
            age: 21
        },
        hobby: function() {
            console.log("play basketball~")
        }
    }
    
  • 2、new Object + 动态添加属性;

var obj = new Object()
obj.name = "jack"
obj.age = 23
  • 3、new其他类;
function Person() {
    
}
var obj = new Person()

2.2、使用对象

  • 对对象的使用包括如下四个操作:

    • 1、添加属性;(增)
    • 2、修改属性;(改)
    • 3、删除属性;(删)
    • 4、访问属性;(查)
  • 假设对象定义如下:

var obj = {
    name: "jack",
    age: 21,
    friend: {
        name: "Alice",
        age: 21
    },
    hobby: function() {
        console.log("play basketball~")
    }
}
  • 1、增加属性
obj.height = 1.76       // 给obj对象添加height属性
  • 2、修改属性
obj.name = "peter"              // 修改对象的name属性的值为peter
obj.hobby = function() {
    console.log("run~")         // 修改对象的hobby属性的值
}
  • 3、删除属性(使用delete操作符
delete obj.age                  // 删除对象obj的age属性
  • 4、访问属性
console.log(obj.name)           
obj.hobby()

三、方括号的使用

3.1、简介

  • 可以通过方括号访问对象的某一个属性的值特别是那些需要用""包裹的属性名字,要想访问它的值,无法通过.符号,因为 .要求属性名是有效的变量标识符(即不包含空格,也不能以数字开头也不包含特殊字符);

3.2、练习

  • 假设对象如下:
var obj = {
      name: "abcd",
      id: 21,
      "chinese score": 87,
      "reading books": function() {
        console.log("reading books")
      }
}
// 等价
console.log(obj.name)
console.log(obj["name"])
​
// 只能这样写
console.log(obj["chinese score"])
​
// 等价
console.log(obj.id)
console.log(obj["id"])
​
// 等价
obj["reading books"]()
var index = "reading books"
obj[index]()

四、对象的遍历

  • Object类型有一个方法:keys

    • 该方法可以以数组的形式返回传入的对象中所有的可枚举属性属性名

4.1、普通for循环

// 定义一个对象obj
var obj = {
    name: "peter",
    age: 37,
    height: 1.74 
}
​
// 以数组的形式获取对象中的所有关键字
var keyList = Object.keys(obj)
​
for (var i = 0; i < keyList.length; i++) {
    var keyWord = keyList[i]
    var val = obj[keyWord]
    console.log(`key: ${keyWord}, value: ${val}`)
}

4.2、for..in..遍历对象

// 定义一个对象obj
var obj = {
    name: "peter",
    age: 37,
    height: 1.74 
}
​
for (var t in obj) {
    var val = obj[t]
    console.log(`key: ${t}, value: ${val}`)
}

五、javascript中变量的存储

5.1、栈内存与堆内存

  • Number类型、String类型、Boolean类型、Undefined类型、Null类型、BigInt类型以及Symbol类型这七种类型称为原始类型,原始类型占据的空间是在栈内存中分配的;
  • Object类型占据的空间是在堆内存中分配的;

5.2、值类型与引用类型

  • 原始类型是值类型;因为原始类型的变量中保存的是值本身
  • 对象类型是引用类型,因为对象类型的变量中保存的是对象在堆中的地址,即对象的引用

六、函数中的this指向

  • 除了箭头函数之外,其他所有函数都含有this变量;

6.1、指向window

  • 默认的方式调用(即括号的方式)一个函数,this指向window

  • 验证代码

var func = function(name, age) {
  console.log("func被执行了")
  console.log(`${name} is ${age} years old!`)
  console.log(this)
}

func("jack", 18)

可以看到,当使用默认的方式调用的时候,this确实指向window;

image.png

6.2、指向对象

  • 通过对象调用this指向调用的对象
  • 验证代码
var obj = {
    name: "jack",
    age: 18,
    run: function() {
      console.log("is running")
      console.log(this)
    }
  }

obj.run()

可以看到,当使用对象调用的时候,this指向调用的对象;

image.png