5.js仔必看的对象八股文

最新推荐文章于 2024-07-26 11:41:15 发布

走coder走过的路

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量1.5k

点赞数 31

文章标签： javascript 前端 angular.js

本文链接：https://blog.csdn.net/m0_58085188/article/details/136603309

版权

1.讲一讲你对对象的理解，手写一个基础的js对象

在js中对象是一个复杂的数据类型
对象类型又属性和方法（函数）组成
下面我手写一个基础的对象使用的对象字面量的方法去创建对象（其实还有创建对象的方法，比如new object+动态添加属性 new其他类）

 var person = {
      name: "校草",
      age: 20,
      friend: {
        name: "kobe",
        age: 30
      },
      eat: function () {
        console.log("eating");
      },
      run: function () {
        console.log("runing");
      },
      study: function () {
        console.log("studing");
      }
    }

有一个重点，属性之间，需要，隔开哦

2.讲一讲对象的常见操作，并且手写一个例子出来

对象的使用常见操作有如下（代码还是拿第一题的对象举例）

1.访问对象属性

console.log(person.name); console.log(person.friend.age);
person.eat()

2.修改对象属性

 person.age = 30
 person.friend.age = 90     person.eat = function () {
      console.log("老子被改了");

3.添加对象属性

    person.width = "80斤"
    person.swim = function () {
      console.log("老子是新添加的游泳王");
    }

4.删除对象属性
- ```
delete person.name
```

3.讲一讲对象的遍历，手撕几个遍历例子

对象的遍历：表示获取对象中所有的属性和方法
其中Object.keys() 方法会返回一个:由一个给定对象的自身可枚举属性组成的数组；

 // 1.商品对象 以下两个遍历例子都是基于这个对象
    var product = {
      name: "商品",
      priece: 900,
      shoProduct: function () {
        console.log("恭喜你购买商品");
      }
    }

普通for循环
    var productkeys = Object.keys(product)
    for (var i = 0; i < productkeys.length; i++) {
      var key = productkeys[i]
      var value = product[key]
      console.log(`key:${key}, value：${value}`);
    }

该例子使用的for in遍历方法
 for (var key in product) {
      var value = product[key]
      console.log(`key:${key}, value：${value}`);
    }

4.讲讲this以及指向，使用场景

以默认的方式调用一个函数的时候，this指向window
通过对象调用，this指向调用的对象

this有两种绑定规则

默认的方式调用函数，指向window

    function foo(name, age) {
      console.log(arguments)
      console.log(this)
    }
    foo("abc", 123)

function foo() {
  console.log(this)
}
var bar = {
  name: "bar",
  foo: foo
}

bar.foo() // this -> bar

this让js更加灵活，以下是应用场景的例子

如果函数是被某一个对象来引用并且调用的话，那么this会指向这个对象

5.总结一下Chrome的debug调试技巧

crome开发者工具consloe（控制台）区域，可以查看代码中使用consloe.log()输出的信息
给代码加断点的话，代码运行时遇到断点会停止执行
watch（监视）区域：可以输入对应的变量，可以管擦代码运行的时候，变量的变化。
breakpoints（断点）区域：可以查看js代码中所有添加的断点
scope（作用域）区域：可以查看代码生成的作用域
左上方工具栏按钮的作用（左到右）
- 1.控制调试程序的暂停和恢复
- 2.跳过下一个函数调用，执行下一行代码
- 3.进入下一个函数调用，可查看函数内部执行顺序
- 4.跳出当前函数
- 5.进入下一个函数调用，不会进入setTimeout内部的函数

6.讲一讲值传递和引用传递的区别

值类型（原始类型）：在变量中保存的是值本身，占据的空间是在栈内存中分配的
引用类型（对象类型）：在变量中保存的是对象的“引用”，占据的空间是在堆内存中分配的
将值类型传递给函数参数,函数内部对参数的改变不会影响函数外部的变量
```
function foo(a) {
  a = 200
}
var num = 100
foo(num) 
console.log(num) // 100
```
将引用类型传递给函数参数,函数参数保存的是对象的"引用",在函数内部修改对象的属性会影响函数外部的变量

function foo(a) {
  a.name = "HTML"
}

var obj = {
  name: "JavaScript"
}
foo(obj)
console.log(obj.name) // HTML

7.讲讲创建对象的方案，类和对象的关系以及构造函数

创建对象的方案有很多种，
- 常见的有字面量（这样遇到很多对象，都有相同的属性的时候，需要重复写代码）
- 还有设计模式中的工厂函数，它的原理是封装一个函数，这个函数用于帮助我们创建一个对象，我们只需要调用这个函数就可以
  - 工厂模式就是一种常见的设计模式
  - ```
  // 工厂函数(工厂生产student对象) -> 一种设计模式
   // 通过工厂设计模式, 自己来定义了一个这样的函数
  function createStudent(name, age, height) {
       var stu = {}
       stu.name = name
       stu.age = age
       stu.height = height
       stu.running = function() {
         console.log("running~")
       }
       return stu
     }
    
     var stu1 = createStudent("why", 18, 1.88)
     var stu2 = createStudent("kobe", 30, 1.98)
     var stu3 = createStudent("james", 25, 2.05)
     console.log(stu1)
     console.log(stu2)
     console.log(stu3)
```
- 因为工厂创建对象有一个比较大的问题就是在打印对象的时候，对象类型都是object类型，非常不方便，所以在开发中构造函数用的将对多一些。
- 构造函数也称之为构造器，通常我们在创建对象时会调用的函数
- 在其他面相的编程语言中，构造函数是存在于类中的一个方法，称之为构造方法；
- 但是js中的构造函数有点不太一样，构造函数扮演了其他语言类的角色；也就是说在js中，构造函数其实就是类的扮演者，
  - 比如说系统默认给我们提供的date就是一个构造函数，也可以看成是一个类；
  - 在ES5之前，我们都是通过function来声明一个构造函数的，之后通过new关键字来调用；
  - 但是在ES6之后，js可以像别的语言一样，通过class来声明一个类；
- 类和对象的关系就是
  - 类就是构造函数，其实可以理解为模版
  - 对象就是属性具体的对象，比如水果是统称，具体的对象有苹果、橘子等等
- 构造函数写法如下
- ```
    // JavaScript已经默认提供给了我们可以更加符合JavaScript思维方式(面向对象的思维方式)的一种创建对象的规则
    // 在函数中的this一般指向某一个对象
    /*
      如果一个函数被new操作符调用
        1.创建出来一个新的空对象
        2.让this指向这个空对象
        3.执行函数体的代码块
        4.如果没有明确的返回一个非空对象, 那么this指向的对象会自动返回
    */
    function coder(name, age, height) {
      this.name = name
      this.age = age
      this.height = height
      this.running = function() {
        console.log("running~")
      }
    }

    // 在函数调用的前面加 new 关键字(操作符)
    var stu1 = new coder("why", 18, 1.88)
    var stu2 = new coder("kobe", 30, 1.98)
    console.log(stu1, stu2)
```
  - 补充：面试官喜欢问为什么构造函数不需要添加对象以及返回值
    - 因为new操作符会创建一个新的对象出来
    - 如果没有明确的返回一个非空对象，那么this指向的对象会自动返回
    - 如果一个函数被new操作符调用，他会出现以下情况
      - 1.创建出一个新的对象
      - 2.让this指向这个空对象
      - 3.执行函体的代码块
      - 4.如果没有明确返回一个非空对象，那么this指向的对象会自动返回
- 8.为什么现在开发中不建议用var了，从对象的角度讲一讲
- 因为var定义变量会默认添加到windo上面。

走coder走过的路

关注

31
点赞
踩
40

收藏

觉得还不错? 一键收藏
1
评论
5.js仔必看的对象八股文

crome开发者工具consloe（控制台）区域，可以查看代码中使用consloe.log()输出的信息给代码加断点的话，代码运行时遇到断点会停止执行watch（监视）区域：可以输入对应的变量，可以管擦代码运行的时候，变量的变化。breakpoints（断点）区域：可以查看js代码中所有添加的断点scope（作用域）区域：可以查看代码生成的作用域左上方工具栏按钮的作用（左到右）1.控制调试程序的暂停和恢复2.跳过下一个函数调用，执行下一行代码3.进入下一个函数调用，可查看函数内部执行顺序。
复制链接

扫一扫