当前位置：首页 > article >正文

【每日前端面试-02】

article 2025/2/28 20:56:58

在 JavaScript 中，如何创建一个对象，并且为该对象添加属性和方法？请举例说明。

对象字面量方式：

let person = {
  name: "张三",
  age: 25,
  sayHello: function() {
    console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old.`);
  }
};

使用 new Object() 方式：

let person = new Object();
person.name = "李四";
person.age = 30;
person.sayHello = function() {
  console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old.`);
};

构造函数方式：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old.`);
  };
}
let person1 = new Person("王五", 35);

记忆口诀：“创建对象有几招，字面量法最明了，new Object 也能搞，构造函数更有效”

简述一下 JavaScript 中 this 关键字在不同情况下的指向。

在全局作用域中，this 指向全局对象（在浏览器中是 window 对象）。
例如：
```
console.log(this); 
```
作为普通函数调用时，this 指向全局对象（非严格模式下）或 undefined （严格模式下）。
例如：
```
function myFunction() {
  console.log(this); 
}
myFunction();
```

作为对象的方法调用时，this 指向该对象。
例如：

let obj = {
  method: function() {
    console.log(this); 
  }
};
obj.method();

使用 call、apply、bind 方法调用函数时，可以显式指定 this 的指向。
例如：

function myFunction() {
  console.log(this); 
}
myFunction.call({ name: 'John' });

在构造函数中，this 指向新创建的对象实例。
例如：

function Person(name) {
  this.name = name;
}
let person = new Person('Alice');

记忆口诀：“全局之中指全局，普通调用看模式，对象方法指对象，显式指定靠方法，构造函数指实例”

在 HTML 中，`<script>` 标签有一个 defer 属性和 async 属性，它们的作用是什么？有什么区别？

在 HTML 中，<script> 标签的 defer 和 async 属性都用于控制脚本的加载和执行方式。
defer 属性的作用是：当浏览器解析到带有 defer 属性的 <script> 标签时，会继续解析页面，同时下载脚本，但脚本会在页面解析完成后、DOMContentLoaded 事件触发前执行。
async 属性的作用是：当浏览器遇到带有 async 属性的

defer 保证脚本按顺序执行，且在页面解析完成后执行。
async 不保证脚本的执行顺序，下载完成立即执行。
记忆口诀：“defer 下载同步走，页面完后再执行，async 异步速下载，顺序不定立即跑”

如何在 CSS 中实现一个元素的水平和垂直居中？请列举多种方法。

在 CSS 中实现一个元素的水平和垂直居中，有以下多种方法：

使用 Flex 布局：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用绝对定位结合 transform：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 Grid 布局：

.parent {
  display: grid;
  justify-items: center;
  align-items: center;
}

对于已知宽高的元素，使用绝对定位结合负边距：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;  /* 元素高度的一半 */
  margin-left: -50px;  /* 元素宽度的一半 */
}