JS高程读书笔记——深入理解对象与函数的本质

JavaScript中所有对象都具有toLocaleString()、toString()和valueOf()方法，toLocaleString()方法经常也会返回一个字符串，以便在某个区域设置中显示日期和时间，toString()方法也返回一个字符串，它表示对象的一个文本表示，而valueOf()方法返回一个基本类型的值，对不同类型的对象有不同的行为。

变量声明

在JavaScript中，声明变量有两种方式：使用new操作符后跟Object构造函数创建，或者使用对象字面量表示法。

// 使用new操作符创建对象
const person = new Object();

// 使用对象字面量表示法创建对象
const person = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

对象属性和方法

对象可以具有属性和方法。属性是对象的数据，而方法是对象的行为。

// 对象属性
const person = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

// 对象方法
const person = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer',
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

私有变量

JavaScript中没有真正的私有变量，但是可以使用闭包来模拟私有变量。

// 使用闭包模拟私有变量
const person = (function() {
  let name = 'John Doe';

  return {
    getName: function() {
      return name;
    },
    setName: function(newName) {
      name = newName;
    }
  };
})();

构造函数

构造函数是用于创建对象的函数。构造函数的名称通常以大写字母开头。

// 定义构造函数
function Person(name, age, occupation) {
  this.name = name;
  this.age = age;
  this.occupation = occupation;
}

// 使用构造函数创建对象
const person = new Person('John Doe', 30, 'Software Engineer');

原型继承

原型继承是JavaScript中的一种继承机制。当一个对象从另一个对象继承时，它就会继承另一个对象的属性和方法。

// 定义父对象
const Person = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

// 定义子对象
const Employee = Object.create(Person);

// 添加子对象特有属性和方法
Employee.salary = 100000;
Employee.work = function() {
  console.log('I am working');
};

作用域

作用域是变量和函数的可见范围。作用域有两种类型：全局作用域和局部作用域。全局作用域是整个脚本可见的，而局部作用域只在函数内部可见。

// 全局作用域
let name = 'John Doe';

// 局部作用域
function greet() {
  let message = 'Hello, ' + name;
  console.log(message);
}

greet();

立即执行函数

立即执行函数是指在定义后立即调用的函数。立即执行函数通常用于封装代码，使代码在全局作用域中不可见。

// 立即执行函数
(function() {
  let name = 'John Doe';

  console.log('Hello, ' + name);
})();

词法作用域

词法作用域是JavaScript中的一种作用域机制。词法作用域是指函数的作用域由函数定义时的词法环境决定。

// 定义父函数
function parent() {
  let name = 'John Doe';

  // 定义子函数
  function child() {
    console.log(name);
  }

  child();
}

parent();

闭包

闭包是指可以访问其创建函数作用域中的变量的函数。闭包通常用于封装数据，使数据在函数外仍然可用。

// 定义一个闭包
const counter = (function() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
})();

// 调用闭包
const count1 = counter();
const count2 = counter();

console.log(count1); // 1
console.log(count2); // 2

定时器

定时器是JavaScript中用于在指定时间间隔后执行代码的函数。定时器有两种类型：setTimeout()和setInterval()。

// 使用setTimeout()设置定时器
setTimeout(function() {
  console.log('Hello, world!');
}, 1000);

// 使用setInterval()设置定时器
setInterval(function() {
  console.log('Hello, world!');
}, 1000);

事件处理

事件处理是JavaScript中用于响应用户交互的函数。事件处理程序可以附加到元素上，以便在用户与元素交互时触发。

// 添加点击事件处理程序
document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked!');
});

DOM

DOM（文档对象模型）是JavaScript中用于表示和操作HTML文档的API。DOM将HTML文档表示为一个对象树，每个对象代表文档中的一个元素。

// 获取文档中的所有元素
const elements = document.getElementsByTagName('*');

// 循环遍历元素并打印元素的标签名
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i].tagName);
}

总结

在本文中，我们深入研究了JavaScript中的对象和函数。我们探讨了变量声明的两种方式，并研究了对象属性和方法。我们还探讨了私有变量、构造函数、原型继承、作用域、立即执行函数、词法作用域、闭包、定时器、事件处理和DOM。通过阅读这篇文章，您应该对JavaScript中的对象和函数有一个更深入的理解。