深入理解 JavaScript 原型与 ES6 新特性

深入理解 JavaScript 原型与 ES6 新特性

---

🎯 今日学习目标

1. 掌握 ES6 模板字符串（Template Literals）的使用
2. 理解 prototype 与 Object.prototype 的区别
3. 使用 map 方法生成 HTML 内容

---

✨ 1. ES6 模板字符串：告别字符串拼接

在 ES5 中，我们经常这样拼接字符串：

let name = "Alice";
let greeting = "Hello, " + name + "!";

在 ES6 中，使用模板字符串（反引号 ` 和 ${}）让代码更清晰：

let name = "Alice";
let greeting = `Hello, ${name}!`; // 更简洁，支持多行

在es5中我们实现字符串的换行写法需要这样：

const html = "<div>\n" + 
" <p>这是一段文字</p>\n" + 
"</div>";

然而在es6中，我们只需要这样：

const html = ` <div> <p>这是一段文字</p> </div> `;

✅ 优势：

• 支持多行文本
• 内嵌变量 ${variable}
• 可读性强，特别适合生成 HTML

---

🔗 2. prototype vs Object.prototype：你真的理解了吗？

❌ 常见误解

“prototype 和 Object.prototype 是同一个东西？”

不是！它们完全不同。

概念	类型	说明
prototype	函数的属性	每个函数都有，指向一个对象，用于实例继承
Object.prototype	一个对象	所有对象的“最终祖先”，提供 .toString()、.hasOwnProperty() 等方法

🧩 关键关系图

实例
  └── __proto__ → 构造函数.prototype
                   └── __proto__ → Object.prototype
                                     └── __proto__ → null

✅ 代码验证

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

const p = new Person("Alice");

console.log(p.__proto__ === Person.prototype);        // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(p.toString); // 存在！继承自 Object.prototype

💡 所有对象最终都继承自 Object.prototype，这就是原型链。

---

🧰 3. map 方法：批量生成内容

map -  是数组的方法，用于遍历数组的每一项，并对每一项执行一个函数，返回一个新数组。

const todos = [ 
{ text: "学习 JavaScript", done: false }, 
{ text: "写作业", done: true },
{ text: "锻炼身体", done: false } 
];
todos.map(todo => `
    <li>${todo.text}</li>
    `).join('')

那么为什么代码最后要加上.join('')呢?

🔹 问题：生成的 HTML 中会有逗号！

生成的html其实是这样的：

<ul> <li>学习 JavaScript</li>,<li>写作业</li>,<li>锻炼身体</li> </ul>

🔹解决：使用join

• .join('') 把数组中的所有字符串用空字符串连接，变成一个完整的 HTML 字符串，没有逗号。

✅ 使用 map + 模板字符串，轻松生成 DOM 内容，代码清晰易维护。