轻松入门Javascript高级编程——揭秘前端开发的魅力

2023-12-08 18:09:40

探索 JavaScript 高级编程：闭包、构造函数、类、Window 对象、This 和函数调用

闭包的魔力：访问内部变量的秘密通道

在 JavaScript 的神奇世界中，闭包是一道通往隐秘知识的传送门。闭包允许你在函数外部访问函数内部定义的变量，即使函数已经执行完毕。这种能力在 jQuery 库中得到了广泛应用，它通过闭包来保存函数变量，让你可以轻松操作 DOM 元素。

// 定义一个闭包函数，它将变量 x 存储在内存中，即使函数已经执行完毕。
const add = (x) => {
  return (y) => {
    return x + y;
  };
};

// 创建一个新的函数，它继承了闭包函数的变量 x。
const add5 = add(5);

// 即使 add 函数已经执行完毕，我们仍然可以通过 add5 函数访问变量 x。
console.log(add5(2)); // 输出：7

构造函数和类：对象创建的捷径

构造函数是一种特殊的函数，让你可以通过使用 new 来创建对象。它类似于一个蓝图，为新对象指定了属性和方法。而类则是一种语法糖，让你可以更方便地创建对象，提供了一种简洁且可维护的方法。

// 使用构造函数创建对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 创建一个 Person 对象
const john = new Person("John Doe", 30);

// 使用类创建对象
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// 创建一个 Person 对象
const jane = new Person("Jane Doe", 25);

Window 和 Window 对象：与浏览器窗口的亲密接触

Window 是一个全局对象，代表当前浏览器的窗口。Window 对象是 Window 的构造函数，允许你访问浏览器的各种属性和方法。通过 Window 对象，你可以获取当前页面的 URL、操纵 DOM 元素等。

// 获取当前页面的 URL
console.log(window.location.href);

// 创建一个新的 DOM 元素
const newElement = window.document.createElement("div");

Class 的局限：一个有缺憾的语法糖

虽然 JavaScript 中的 class 是一种有用的语法糖，但它与真正的类有本质区别。JavaScript 中的 class 缺乏继承和多态性，这限制了它们的灵活性。

this 与 5 种函数调用形式：上下文之舞

this 是 JavaScript 中一个特殊的变量，它表示当前函数的执行上下文。在不同函数调用形式下，this 代表不同的值：普通函数调用、方法调用、构造函数调用、apply 调用和 call 调用。理解 this 的行为对于编写健壮且可维护的代码至关重要。

// 普通函数调用
function sayHello() {
  console.log(this); // 输出：window 对象
}

// 方法调用
const person = {
  name: "John Doe",
  sayHello: function() {
    console.log(this); // 输出：person 对象
  }
};

// 构造函数调用
function Person(name) {
  this.name = name;
  console.log(this); // 输出：新的 Person 对象
}

this 与箭头函数：一个意外的转折

箭头函数是 JavaScript 中一种较新的函数语法，它没有自己的 this，而是继承外层函数的 this。这使得箭头函数非常适合用作回调函数，因为它不会意外地改变执行上下文。

const person = {
  name: "John Doe",
  greet: function() {
    const arrowFunction = () => {
      console.log(this.name); // 输出：John Doe
    };

    arrowFunction();
  }
};

函数重载：参数列表的多重奏

函数重载允许函数具有多个实现，每个实现都接受不同的参数列表。在 JavaScript 中，可以通过使用不同数量的参数来实现函数重载。

function sum(a, b) {
  if (b === undefined) {
    return a;
  } else {
    return a + b;
  }
}

console.log(sum(5)); // 输出：5
console.log(sum(5, 10)); // 输出：15