自学内容网 自学内容网

前端面试宝典【Javascript篇】【1】

在这里插入图片描述

欢迎来到《前端面试宝典》,这里是你通往互联网大厂的专属通道,专为渴望在前端领域大放异彩的你量身定制。通过本专栏的学习,无论是一线大厂还是初创企业的面试,都能自信满满地展现你的实力。

核心特色:

  • 独家实战案例:每一期专栏都将深入剖析真实的前端面试案例,从基础知识到前沿技术,从算法挑战到框架运用,让你在实战中迅速成长。
  • 深度技术解析:不再只是表面文章,我们将带你深入技术的核心,理解每一个知识点背后的原理与- - 应用场景,让你在面试中不仅知其然,更知其所以然。
  • 高质量内容保证:每一期内容都经过精心策划与打磨,确保信息的准确性和实用性,拒绝泛泛而谈,只提供真正有价值的内容。
  • 持续更新迭代:持续关注前端领域的最新动态,及时更新专栏内容,确保你始终站在技术的最前沿。

1. new的实现原理是什么?

在JavaScript中,new操作符用于调用一个构造函数并创建一个新的对象。当使用new关键字调用一个构造函数时,会经历以下几个步骤:

  • 创建空对象: 首先,会创建一个新的空对象。

  • 设置原型: 新创建的空对象的原型(__proto__属性或[[Prototype]])会被设置为构造函数的prototype属性所指向的对象。这样就将新对象与构造函数的原型链关联起来。

  • 绑定this: 构造函数内部的this会被绑定到新创建的对象上。这意味着构造函数内部对this的任何引用和修改实际上都是针对这个新对象的。

  • 执行构造函数: 接着,构造函数被调用,通常会初始化新对象的状态,比如给它添加属性和方法。

  • 返回新对象: 如果构造函数没有显式地返回一个对象,则默认返回新创建的对象。如果构造函数返回了一个对象,则返回这个对象;如果返回的是非对象值(如undefined、数字、字符串等),则忽略返回值,仍然返回新创建的对象。

下面是一个简单的示例来说明new操作符的使用:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('Alice', 30);
person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.

在这个例子中,new Person(‘Alice’, 30);会创建一个新的Person对象,并将其__proto__链接到Person.prototype,然后调用Person构造函数来初始化这个对象。

2. 如何正确判断this的指向

在JavaScript中,this的指向取决于函数的调用方式,这可能会导致一些常见的陷阱和错误。以下是一些判断this指向的规则和方法:

  • 全局上下文(非严格模式): 在全局作用域或者非严格模式下的函数调用中,this通常指向全局对象(在浏览器中通常是window)。

  • 对象方法调用: 当函数作为某个对象的方法被调用时,this指向该对象。

   const obj = {
       value: 42,
       printValue: function() {
           console.log(this.value);
       }
   };
   obj.printValue(); // 输出: 42
   
  • 构造函数调用: 使用new关键字调用函数时,this指向新创建的对象。
   function MyClass() {
       this.value = 42;
   }
   const instance = new MyClass();
   console.log(instance.value); // 输出: 42
   
  • 箭头函数: 箭头函数不会绑定自己的this,而是从封闭作用域继承this。
   const obj = {
       value: 42,
       printValue: () => {
           console.log(this.value); // 这里的this不是obj,而是全局对象或undefined(严格模式)
       }
   };
   obj.printValue(); // 输出: undefined 或 全局对象的value属性
   
  • 事件处理器: 在事件处理器中,this通常指向触发事件的DOM元素。
   <button id="myButton">Click me</button>
   <script>
       document.getElementById('myButton').addEventListener('click', function() {
           console.log(this.id); // 输出: myButton
       });
   </script>
   
  • 手动绑定this:
    可以使用.call(), .apply()和.bind()方法来明确指定this的值。
    • .call()和.apply()允许你立即调用函数并传递参数,区别在于参数的传递方式不同。
    • .bind()创建一个新函数,在调用时会使用指定的this值。
   const obj = {
       value: 42
   };

   function printValue() {
       console.log(this.value);
   }

   printValue.call(obj); // 输出: 42
   const boundPrintValue = printValue.bind(obj);
   boundPrintValue(); // 输出: 42
   

理解this的这些规则对于编写可预测和健壮的JavaScript代码至关重要。

3. js的with语句

JavaScript 中的 with 语句允许你在一个代码块中使用一个对象的属性,而无需每次都引用该对象。这在某种程度上提供了局部作用域的概念,使得你可以直接使用对象的属性名,而不需要前缀对象名。

with 语句的基本语法如下:

with (object) {
    // 在这里可以使用 object 的属性,不需要前缀 object 名称
}

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

with (person) {
    console.log(firstName + ' ' + lastName + ', ' + age);
}
// 输出: John Doe, 30

然而,with 语句有一些缺点和潜在的问题:

  • 性能影响:由于 with 语句会修改作用域链,这可能导致解析变量时的性能下降。

  • 代码可读性和维护性:使用 with 语句可能会使代码难以阅读和理解,特别是当嵌套使用时。

  • 潜在的错误:如果对象有与外部作用域相同的属性名,那么在 with 块中访问该属性时,会优先使用对象内的属性,这可能导致意外的结果。

  • 严格模式:在严格模式下,with 语句是被禁止的,因为它们可能引入作用域的不确定性,以及性能上的问题。

由于上述原因,with 语句在现代JavaScript编程中并不推荐使用,尤其是在严格模式下。取而代之的是,推荐使用更现代的语言特性,如解构赋值,来达到类似的效果,同时保持代码的清晰性和性能。


原文地址:https://blog.csdn.net/BDawn/article/details/140661037

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!