⚡ JavaScript

What are the primitive data types in JavaScript?

考察点：基础知识的掌握。

答案：

JavaScript 中的基本数据类型（原始类型）是指直接存储在栈内存中的简单数据类型，它们是不可变的。ES5 中共有 6 种基本数据类型。

基本数据类型列表：

1. Number（数字）：

   let num = 42;
   let float = 3.14;
   let negative = -10;
   // 包括整数、浮点数、正数、负数、零
   

2. String（字符串）：

   let str1 = "hello";
   let str2 = 'world';
   let str3 = "123";
   // 用引号包围的字符序列
   

3. Boolean（布尔值）：

   let isTrue = true;
   let isFalse = false;
   // 只有 true 和 false 两个值
   

4. Null（空值）：

   let emptyValue = null;
   // 表示一个空的对象引用
   

5. Undefined（未定义）：

   let undefinedVar;
   console.log(undefinedVar); // undefined
   // 变量声明但未赋值时的默认值
   

特殊说明：

• NaN（Not a Number）：虽然是 Number 类型，但表示"不是数字"的特殊值
• Infinity：表示无穷大的数值

检测数据类型：

console.log(typeof 42);        // "number"
console.log(typeof "hello");   // "string"
console.log(typeof true);      // "boolean"
console.log(typeof null);      // "object" (这是一个历史遗留的bug)
console.log(typeof undefined); // "undefined"

实际应用：

• 函数参数类型检查和验证
• 数据处理前的类型判断
• 表单输入值的类型转换
• API 数据结构的类型安全处理

What is the difference between == and ===?

考察点：对类型转换和严格比较的理解。

答案：

== 和 === 是 JavaScript 中两种不同的比较运算符，它们的主要区别在于是否进行类型转换。

主要区别：

1. == (宽松相等/抽象相等)：

   • 会进行类型转换（Type Coercion）
   • 如果两个值的类型不同，会尝试将它们转换为相同类型再比较
   • 转换规则复杂，容易产生意外结果

2. === (严格相等)：

   • 不进行类型转换
   • 必须类型和值都相等才返回 true
   • 推荐使用，更安全可靠

代码示例对比：

// 类型转换示例
console.log(5 == "5");     // true (字符串"5"被转换为数字5)
console.log(5 === "5");    // false (类型不同)

console.log(true == 1);    // true (true被转换为1)
console.log(true === 1);   // false (类型不同)

console.log(null == undefined);  // true (特殊规则)
console.log(null === undefined); // false (类型不同)

console.log(0 == false);   // true (false被转换为0)
console.log(0 === false);  // false (类型不同)

console.log("" == 0);      // true (空字符串被转换为0)
console.log("" === 0);     // false (类型不同)

类型转换规则：

使用 == 时，JavaScript 会按照以下规则进行类型转换：

• 如果类型相同，则等同于 ===
• null 和 undefined 互相相等，但不等于其他值
• 字符串和数字比较时，字符串转换为数字
• 布尔值转换为数字：true → 1，false → 0
• 对象转换为原始值（调用 valueOf 或 toString）

最佳实践：

// 推荐使用 ===
function isEqual(a, b) {
    return a === b;
}

// 需要类型转换时，显式进行
function compareNumbers(a, b) {
    return Number(a) === Number(b);
}

实际应用：

• 条件判断中优先使用 === 避免意外的类型转换
• 表单验证时使用 === 确保数据类型正确性
• 特殊情况下（如检查 null/undefined）可考虑使用 ==
• ESLint 等工具通常建议使用 === 以提高代码质量

What is scope? How many types of scope are there in JavaScript?

考察点：对变量可访问性规则的理解。

答案：

作用域是指变量和函数的可访问性和生存周期的规则。它决定了在代码的哪些部分可以访问特定的变量或函数。JavaScript 中的作用域遵循词法作用域（静态作用域）规则。

ES5 中的作用域类型：

1. 全局作用域 (Global Scope)：

   var globalVar = "我是全局变量";
   
   function showGlobal() {
       console.log(globalVar); // 可以访问全局变量
   }
   
   console.log(globalVar); // "我是全局变量"
   

2. 函数作用域 (Function Scope)：

   function myFunction() {
       var functionVar = "我是函数作用域变量";
       console.log(functionVar); // 可以访问
   }
   
   myFunction(); // "我是函数作用域变量"
   // console.log(functionVar); // ReferenceError: functionVar is not defined
   

作用域特性：

变量查找机制：

var global = "全局";

function outer() {
    var outerVar = "外层";
    
    function inner() {
        var innerVar = "内层";
        console.log(innerVar);  // "内层" (当前作用域)
        console.log(outerVar);  // "外层" (父级作用域)  
        console.log(global);    // "全局" (全局作用域)
    }
    
    inner();
}

outer();

作用域链工作原理：

function createCounter() {
    var count = 0;
    
    return function() {
        count++; // 访问父级作用域的变量
        return count;
    };
}

var counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
// count 变量被内部函数引用，形成闭包

注意事项：

• 没有块级作用域：ES5 中 var 声明的变量没有块级作用域

  if (true) {
      var blockVar = "块内变量";
  }
  console.log(blockVar); // "块内变量" (仍然可以访问)
  
  for (var i = 0; i < 3; i++) {
      // i 在循环结束后仍然存在
  }
  console.log(i); // 3
  

• 变量提升：声明会被提升到作用域顶部

  function example() {
      console.log(x); // undefined (而不是 ReferenceError)
      var x = 1;
  }
  

实际应用：

• 避免全局变量污染，使用函数作用域包装代码
• 利用闭包实现数据私有化和模块化
• 理解变量提升，避免在声明前使用变量
• 使用 IIFE（立即执行函数）创建独立作用域

What is hoisting?

考察点：对 JavaScript 代码执行顺序的理解。

答案：

变量提升是 JavaScript 引擎在编译阶段将变量和函数声明移动到其作用域顶部的行为。这意味着你可以在声明之前使用变量和函数，但需要注意提升的具体规则和限制。

提升的工作原理：

var 变量提升：

// 实际代码
console.log(x); // undefined (不是 ReferenceError)
var x = 5;
console.log(x); // 5

// 引擎实际执行的等价代码
var x; // 声明被提升，初始化为 undefined
console.log(x); // undefined
x = 5; // 赋值留在原地
console.log(x); // 5

函数声明提升：

// 可以在声明前调用函数
sayHello(); // "Hello!"

function sayHello() {
    console.log("Hello!");
}

// 整个函数定义都被提升了

函数表达式不会提升：

// 这会报错
sayGoodbye(); // TypeError: sayGoodbye is not a function

var sayGoodbye = function() {
    console.log("Goodbye!");
};

// 等价于：
var sayGoodbye; // 只有变量声明被提升，值为 undefined
sayGoodbye(); // 尝试调用 undefined，导致 TypeError
sayGoodbye = function() {
    console.log("Goodbye!");
};

提升的详细规则：

1. 变量声明提升但赋值不提升：

   function example() {
       console.log(a); // undefined
       console.log(b); // undefined
       
       var a = 1;
       var b = 2;
       
       console.log(a); // 1
       console.log(b); // 2
   }
   

2. 函数声明优先于变量声明：

   function test() {
       console.log(foo); // function foo() {...}
       
       var foo = "variable";
       
       function foo() {
           return "function";
       }
       
       console.log(foo); // "variable"
   }
   

3. 同名函数声明，后者覆盖前者：

   function duplicate() {
       console.log(func()); // "second"
       
       function func() {
           return "first";
       }
       
       function func() {
           return "second";
       }
   }
   

常见陷阱：

// 循环中的变量提升
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出 3 次 3，而不是 0,1,2
    }, 100);
}

// 条件语句中的提升
function conditionalHoisting() {
    if (false) {
        var x = 1; // 声明仍然会被提升
    }
    console.log(x); // undefined (不是 ReferenceError)
}

最佳实践：

• 总是在作用域顶部声明变量，使代码行为更明确
• 使用函数声明而不是函数表达式，如果需要在声明前使用函数
• 理解提升机制，但不要依赖它来编写代码
• 使用严格模式可以帮助避免一些提升相关的问题

实际应用：

• 理解提升有助于调试代码中的意外行为
• 在代码审查中识别潜在的提升相关问题
• 编写更可预测和可维护的代码
• 避免在条件语句或循环中声明变量

What are the possible return values of the typeof operator?

考察点：对数据类型检测方法的掌握。

答案：

typeof 操作符用于检测变量的数据类型，返回一个表示类型的字符串。在 ES5 中，typeof 有 7 种可能的返回值。

所有可能的返回值：

1. “undefined” - 未定义的值

   console.log(typeof undefined);     // "undefined"
   console.log(typeof undeclaredVar); // "undefined"
   
   var declared;
   console.log(typeof declared);      // "undefined"
   

2. “boolean” - 布尔值

   console.log(typeof true);          // "boolean"
   console.log(typeof false);         // "boolean"
   console.log(typeof Boolean(1));    // "boolean"
   

3. “number” - 数字

   console.log(typeof 42);            // "number"
   console.log(typeof 3.14);          // "number"
   console.log(typeof NaN);           // "number"
   console.log(typeof Infinity);      // "number"
   

4. “string” - 字符串

   console.log(typeof "hello");       // "string"
   console.log(typeof 'world');       // "string"
   console.log(typeof String(123));   // "string"
   

5. “object” - 对象（包括 null）

   console.log(typeof {});            // "object"
   console.log(typeof []);            // "object"
   console.log(typeof null);          // "object" (历史遗留的 bug)
   console.log(typeof new Date());    // "object"
   console.log(typeof /regex/);       // "object"
   

6. “function” - 函数

   console.log(typeof function(){});  // "function"
   console.log(typeof Math.max);      // "function"
   console.log(typeof Array);         // "function"
   

特殊情况和注意事项：

历史遗留问题：

console.log(typeof null);  // "object" (这是一个著名的 JavaScript bug)

// 正确检测 null 的方法
function isNull(value) {
    return value === null;
}

// 检测真正的对象（排除 null）
function isObject(value) {
    return typeof value === "object" && value !== null;
}

数组检测问题：

console.log(typeof [1, 2, 3]);  // "object"

// 正确检测数组的方法
console.log(Array.isArray([1, 2, 3]));        // true (ES5+)
console.log([1, 2, 3] instanceof Array);      // true
console.log(Object.prototype.toString.call([1, 2, 3])); // "[object Array]"

未声明变量的安全检测：

// 检测未声明的变量不会报错
if (typeof someUndeclaredVar === "undefined") {
    console.log("变量未声明或值为 undefined");
}

// 这样会报 ReferenceError
// if (someUndeclaredVar === undefined) { ... }

实际应用场景：

// 类型检查函数
function getType(value) {
    if (value === null) return "null";
    if (Array.isArray(value)) return "array";
    return typeof value;
}

// 参数类型验证
function processData(data) {
    if (typeof data !== "object" || data === null) {
        throw new Error("Expected an object");
    }
    // 处理对象数据
}

// 功能检测
if (typeof localStorage !== "undefined") {
    // 浏览器支持 localStorage
    localStorage.setItem("key", "value");
}

类型检测最佳实践：

• 使用 typeof 检测基本类型
• 使用 Array.isArray() 检测数组
• 使用 value === null 检测 null
• 使用 instanceof 检测对象实例类型
• 使用 Object.prototype.toString.call() 进行精确类型检测

What is the difference between null and undefined?

考察点：对特殊值的理解和使用场景。

答案：

null 和 undefined 都表示"没有值"，但它们有不同的含义和使用场景。理解它们的区别对于编写健壮的 JavaScript 代码至关重要。

基本定义：

• undefined：表示变量已声明但未赋值，或属性不存在
• null：表示有意设置的"空值"或"无对象"

主要区别：

1. 类型检测：

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (历史遗留问题)

console.log(undefined == null);  // true (类型转换)
console.log(undefined === null); // false (严格比较)

2. 产生方式不同：

// undefined 的产生情况
var declaredButNotAssigned;
console.log(declaredButNotAssigned); // undefined

function noReturn() {
    // 没有返回值
}
console.log(noReturn()); // undefined

var obj = {};
console.log(obj.nonExistentProperty); // undefined

function hasParameter(param) {
    console.log(param); // 如果不传参数，则为 undefined
}
hasParameter(); // undefined

// null 通常是主动赋值
var intentionallyEmpty = null;
var element = document.getElementById("nonexistent"); // 可能返回 null

3. 数值转换：

console.log(Number(undefined)); // NaN
console.log(Number(null));      // 0

console.log(undefined + 1);     // NaN
console.log(null + 1);          // 1

使用场景对比：

undefined 的使用场景：

// 检测变量是否已定义
if (typeof someVariable !== "undefined") {
    // 变量存在
}

// 函数参数默认值处理
function greet(name) {
    if (name === undefined) {
        name = "Guest";
    }
    console.log("Hello, " + name);
}

// 检测对象属性是否存在
var user = {name: "John"};
if (user.age === undefined) {
    console.log("年龄未设置");
}

null 的使用场景：

// 主动清空对象引用
var data = {name: "John"};
data = null; // 释放内存

// 表示空的对象值
var result = findUser("nonexistent");
if (result === null) {
    console.log("用户不存在");
}

// 初始化将来会被赋值的变量
var currentUser = null; // 明确表示当前没有用户登录

检测方法：

function checkValue(value) {
    // 检测 undefined
    if (value === undefined) {
        return "值为 undefined";
    }
    
    // 检测 null
    if (value === null) {
        return "值为 null";
    }
    
    // 检测是否为空值（null 或 undefined）
    if (value == null) { // 等同于 value === null || value === undefined
        return "值为空";
    }
    
    return "有值：" + value;
}

最佳实践：

// 推荐的空值检测方式
function isEmpty(value) {
    return value === null || value === undefined;
}

// 安全的属性访问
function getProperty(obj, prop) {
    if (obj === null || obj === undefined) {
        return undefined;
    }
    return obj[prop];
}

// 设置默认值
function setDefault(value, defaultValue) {
    return (value === null || value === undefined) ? defaultValue : value;
}

实际应用：

• API 返回值处理：区分"属性不存在"(undefined) 和"值为空"(null)
• 函数参数验证：判断参数是否传入
• 对象属性初始化：用 null 表示有意的空值
• 内存管理：使用 null 清空对象引用，帮助垃圾回收

What are falsy values? What falsy values exist in JavaScript?

考察点：对布尔转换规则的理解。

答案：

Falsy 值是在布尔上下文中被转换为 false 的值。当这些值用在条件语句、逻辑运算或任何需要布尔值的地方时，JavaScript 会将它们视为 false。

JavaScript 中的 7 个 falsy 值：

1. false - 布尔值 false

   console.log(Boolean(false)); // false
   if (false) {
       console.log("不会执行");
   }
   

2. 0 - 数字零

   console.log(Boolean(0)); // false
   if (0) {
       console.log("不会执行");
   }
   

3. -0 - 负零

   console.log(Boolean(-0)); // false
   console.log(0 === -0);    // true
   

4. “” - 空字符串

   console.log(Boolean(""));  // false
   console.log(Boolean(''));  // false
   if ("") {
       console.log("不会执行");
   }
   

5. null - 空值

   console.log(Boolean(null)); // false
   if (null) {
       console.log("不会执行");
   }
   

6. undefined - 未定义

   console.log(Boolean(undefined)); // false
   if (undefined) {
       console.log("不会执行");
   }
   

7. NaN - 非数字

   console.log(Boolean(NaN)); // false
   if (NaN) {
       console.log("不会执行");
   }
   

所有其他值都是 truthy 值：

// 这些都是 truthy 值
console.log(Boolean("0"));        // true (字符串"0")
console.log(Boolean("false"));    // true (字符串"false")
console.log(Boolean([]));         // true (空数组)
console.log(Boolean({}));         // true (空对象)
console.log(Boolean(function(){})); // true (函数)
console.log(Boolean(1));          // true (非零数字)
console.log(Boolean(-1));         // true (负数)
console.log(Boolean(Infinity));   // true (无穷大)

实际应用场景：

条件判断：

function processValue(value) {
    if (value) {
        console.log("值存在且有效：" + value);
    } else {
        console.log("值为空或无效");
    }
}

processValue("hello");    // "值存在且有效：hello"
processValue(0);          // "值为空或无效"
processValue("");         // "值为空或无效"
processValue(null);       // "值为空或无效"

默认值设置：

// 使用 || 运算符设置默认值
function greet(name) {
    name = name || "Guest";  // 如果 name 是 falsy，使用 "Guest"
    console.log("Hello, " + name);
}

greet("");          // "Hello, Guest"
greet("John");      // "Hello, John"
greet(null);        // "Hello, Guest"

数据过滤：

var array = [1, 0, "", "hello", null, undefined, "world", false, NaN];

// 过滤掉所有 falsy 值
var truthyValues = array.filter(function(item) {
    return Boolean(item);
});

console.log(truthyValues); // [1, "hello", "world"]

// 或者更简洁的写法
var truthyValues2 = array.filter(Boolean);
console.log(truthyValues2); // [1, "hello", "world"]

表单验证：

function validateForm(formData) {
    var errors = [];
    
    if (!formData.username) {
        errors.push("用户名不能为空");
    }
    
    if (!formData.email) {
        errors.push("邮箱不能为空");
    }
    
    if (!formData.age || formData.age <= 0) {
        errors.push("年龄必须大于0");
    }
    
    return errors;
}

注意事项：

// 这些值虽然看起来"空"，但它们是 truthy 的
console.log(Boolean("0"));        // true
console.log(Boolean("false"));    // true
console.log(Boolean([]));         // true
console.log(Boolean({}));         // true

// 特殊的数字情况
console.log(Boolean(0));          // false
console.log(Boolean(-0));         // false
console.log(Boolean(0.0));        // false

// NaN 的特殊性
console.log(NaN == NaN);          // false
console.log(Boolean(NaN));        // false

类型转换函数：

// 显式转换为布尔值的方法
function toBool(value) {
    return Boolean(value);
}

// 或使用双重否定
function toBool2(value) {
    return !!value;
}

console.log(toBool(""));    // false
console.log(toBool2(0));    // false

实际应用：

• 条件语句中的快速判断
• 设置函数参数的默认值
• 数据验证和过滤
• 表单输入检查
• API 响应数据的有效性判断

How to detect if a variable is an array?

考察点：数组检测方法的掌握。

答案：

检测数组是 JavaScript 中的一个经典问题，因为 typeof 操作符对数组返回 “object”，所以需要使用专门的方法来准确判断。

推荐方法：Array.isArray() (ES5+)：

console.log(Array.isArray([]));           // true
console.log(Array.isArray([1, 2, 3]));    // true
console.log(Array.isArray({}));           // false
console.log(Array.isArray("string"));     // false
console.log(Array.isArray(null));         // false

// 函数中使用
function processArray(data) {
    if (Array.isArray(data)) {
        console.log("这是一个数组，长度为：" + data.length);
    } else {
        console.log("不是数组");
    }
}

其他检测方法：

1. instanceof 操作符：

console.log([] instanceof Array);         // true
console.log([1, 2, 3] instanceof Array); // true
console.log({} instanceof Array);        // false

// 注意：跨框架问题
// 如果数组来自不同的 iframe，instanceof 可能失效
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var iframeArray = iframe.contentWindow.Array;
var arr = new iframeArray();
console.log(arr instanceof Array);       // false (在某些情况下)

2. Object.prototype.toString.call()：

function isArray(value) {
    return Object.prototype.toString.call(value) === '[object Array]';
}

console.log(isArray([]));           // true
console.log(isArray([1, 2, 3]));   // true
console.log(isArray({}));          // false
console.log(isArray("string"));    // false

// 这种方法最可靠，即使跨框架也能正确工作

3. constructor 属性：

function isArrayByConstructor(value) {
    return value && value.constructor === Array;
}

console.log(isArrayByConstructor([]));     // true
console.log(isArrayByConstructor(null));   // false

// 注意：constructor 可能被修改
var arr = [];
arr.constructor = Object;
console.log(arr.constructor === Array);    // false (被修改了)

方法对比和选择：

var testCases = [
    [],
    [1, 2, 3],
    {},
    "string",
    null,
    undefined,
    arguments  // 函数的 arguments 对象
];

function compareArrayDetectionMethods() {
    testCases.forEach(function(testCase) {
        console.log("测试值：", testCase);
        console.log("Array.isArray：", Array.isArray(testCase));
        console.log("instanceof：", testCase instanceof Array);
        console.log("toString：", Object.prototype.toString.call(testCase) === '[object Array]');
        console.log("---");
    });
}

兼容性处理（为不支持 Array.isArray 的环境）：

// Array.isArray 的 polyfill
if (!Array.isArray) {
    Array.isArray = function(value) {
        return Object.prototype.toString.call(value) === '[object Array]';
    };
}

// 或者创建自己的检测函数
function isArray(value) {
    // 优先使用原生方法
    if (Array.isArray) {
        return Array.isArray(value);
    }
    // 回退到 toString 方法
    return Object.prototype.toString.call(value) === '[object Array]';
}

实际应用场景：

// 函数参数处理
function processData(data) {
    if (Array.isArray(data)) {
        // 处理数组数据
        data.forEach(function(item) {
            console.log("处理数组项：", item);
        });
    } else {
        // 将单个值转换为数组
        data = [data];
        console.log("转换为数组：", data);
    }
}

processData([1, 2, 3]);  // 处理数组
processData("single");   // 转换为数组

// API 响应处理
function handleAPIResponse(response) {
    var items = response.data;
    
    // 确保 items 是数组
    if (!Array.isArray(items)) {
        console.warn("API 返回的数据不是数组，进行处理");
        items = items ? [items] : [];
    }
    
    return items;
}

// 类型安全的数组操作
function safeArrayOperation(arr, operation) {
    if (!Array.isArray(arr)) {
        throw new TypeError("期望数组类型，但收到：" + typeof arr);
    }
    
    return operation(arr);
}

性能比较：

// 性能测试（仅供参考）
var testArray = [1, 2, 3, 4, 5];
var iterations = 1000000;

console.time("Array.isArray");
for (var i = 0; i < iterations; i++) {
    Array.isArray(testArray);
}
console.timeEnd("Array.isArray");

console.time("instanceof");
for (var i = 0; i < iterations; i++) {
    testArray instanceof Array;
}
console.timeEnd("instanceof");

console.time("toString");
for (var i = 0; i < iterations; i++) {
    Object.prototype.toString.call(testArray) === '[object Array]';
}
console.timeEnd("toString");

最佳实践：

• 首选 Array.isArray()：标准方法，性能好，兼容性强
• 避免 typeof：对数组返回 “object”，无法区分数组和对象
• 谨慎使用 instanceof：在跨框架环境中可能失效
• toString 方法：最可靠但性能稍差，适合作为 polyfill
• 总是进行类型检查：在对数组进行操作前确保其类型正确

What is the difference between primitive types and reference types in JavaScript?

考察点：对内存分配和数据传递方式的理解。

答案：

原始类型和引用类型在内存存储、数据传递、比较方式等方面有着根本性的区别。理解这些差异对于掌握 JavaScript 的内存管理和避免常见陷阱至关重要。

基本定义：

• 原始类型（Primitive Types）：Number、String、Boolean、null、undefined
• 引用类型（Reference Types）：Object、Array、Function、Date、RegExp 等

内存存储方式：

原始类型 - 栈内存存储：

var a = 10;
var b = a;  // 复制值
b = 20;

console.log(a); // 10 (a 不受影响)
console.log(b); // 20

// 内存示意：
// 栈内存
// a: 10
// b: 20 (独立的内存空间)

引用类型 - 堆内存存储：

var obj1 = {name: "John"};
var obj2 = obj1;  // 复制引用（地址）
obj2.name = "Jane";

console.log(obj1.name); // "Jane" (obj1 也被修改了)
console.log(obj2.name); // "Jane"

// 内存示意：
// 栈内存        堆内存
// obj1: 地址1 → {name: "Jane"}
// obj2: 地址1 → (指向同一个对象)

数据传递方式：

按值传递（原始类型）：

function modifyPrimitive(value) {
    value = value + 10;
    console.log("函数内：", value); // 15
}

var num = 5;
modifyPrimitive(num);
console.log("函数外：", num);      // 5 (原值不变)

按引用传递（引用类型）：

function modifyObject(obj) {
    obj.value = obj.value + 10;
    console.log("函数内：", obj.value); // 15
}

var myObj = {value: 5};
modifyObject(myObj);
console.log("函数外：", myObj.value);  // 15 (原对象被修改)

// 但重新赋值不会影响原对象
function reassignObject(obj) {
    obj = {value: 100};  // 这只是改变了局部变量 obj 的指向
}

reassignObject(myObj);
console.log("重新赋值后：", myObj.value); // 15 (原对象未变)

比较方式差异：

原始类型 - 值比较：

var a = 5;
var b = 5;
console.log(a === b); // true (值相等)

var str1 = "hello";
var str2 = "hello";
console.log(str1 === str2); // true (值相等)

引用类型 - 引用比较：

var obj1 = {name: "John"};
var obj2 = {name: "John"};
console.log(obj1 === obj2); // false (不同的对象，不同的引用)

var obj3 = obj1;
console.log(obj1 === obj3); // true (相同的引用)

// 数组也是如此
var arr1 = [1, 2, 3];
var arr2 = [1, 2, 3];
console.log(arr1 === arr2); // false (不同的数组对象)

复制操作的区别：

原始类型 - 深复制（自动）：

var original = 42;
var copy = original;
copy = 100;

console.log(original); // 42 (不受影响)
console.log(copy);     // 100

引用类型 - 浅复制：

var originalObj = {
    name: "John",
    details: {age: 25}
};

// 浅复制
var shallowCopy = {};
for (var key in originalObj) {
    shallowCopy[key] = originalObj[key];
}

shallowCopy.name = "Jane";                // 不影响原对象
shallowCopy.details.age = 30;             // 影响原对象（共享嵌套对象）

console.log(originalObj.name);            // "John"
console.log(originalObj.details.age);     // 30 (被修改了)

深复制的实现：

// 简单的深复制函数（仅处理普通对象和数组）
function deepCopy(obj) {
    if (obj === null || typeof obj !== "object") {
        return obj; // 原始类型直接返回
    }
    
    if (obj instanceof Array) {
        var arrCopy = [];
        for (var i = 0; i < obj.length; i++) {
            arrCopy[i] = deepCopy(obj[i]);
        }
        return arrCopy;
    }
    
    var objCopy = {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepCopy(obj[key]);
        }
    }
    return objCopy;
}

// 使用示例
var original = {
    name: "John",
    hobbies: ["reading", "swimming"],
    details: {age: 25}
};

var deepCopied = deepCopy(original);
deepCopied.name = "Jane";
deepCopied.hobbies.push("coding");
deepCopied.details.age = 30;

console.log(original.name);           // "John" (不受影响)
console.log(original.hobbies);        // ["reading", "swimming"] (不受影响)
console.log(original.details.age);    // 25 (不受影响)

类型检测的差异：

// 原始类型检测
function isPrimitive(value) {
    return value !== Object(value);
}

console.log(isPrimitive(5));        // true
console.log(isPrimitive("string")); // true
console.log(isPrimitive({}));       // false
console.log(isPrimitive([]));       // false

// 引用类型检测
function isObject(value) {
    return value === Object(value);
}

实际应用场景：

// 状态管理中的陷阱
var appState = {
    user: {name: "John"},
    items: [1, 2, 3]
};

function updateUser(state, newName) {
    // 错误：直接修改原状态
    // state.user.name = newName;
    
    // 正确：创建新对象
    return {
        user: {name: newName},
        items: state.items.slice() // 复制数组
    };
}

// 函数参数验证
function processUserData(userData) {
    // 防御性复制，避免修改原始数据
    var userCopy = deepCopy(userData);
    
    // 安全地修改副本
    userCopy.processed = true;
    return userCopy;
}

最佳实践：

• 理解引用语义：修改对象属性会影响所有引用该对象的变量
• 防御性编程：在函数中操作对象前考虑是否需要复制
• 避免意外修改：传递对象给函数时注意可能的副作用
• 合理使用深复制：只在必要时进行深复制，注意性能影响
• 状态管理：在状态管理中创建新对象而不是修改现有对象

What are function declarations and function expressions? What are their differences?

考察点：对函数定义方式的理解。

答案：

函数声明和函数表达式是 JavaScript 中创建函数的两种主要方式，它们在语法、提升行为、使用时机等方面有着重要区别。

基本语法对比：

函数声明（Function Declaration）：

function functionName() {
    // 函数体
    return "这是函数声明";
}

// 具名函数声明
function greet(name) {
    return "Hello, " + name;
}

函数表达式（Function Expression）：

// 匿名函数表达式
var functionName = function() {
    return "这是函数表达式";
};

// 具名函数表达式
var greet = function greetFunction(name) {
    return "Hello, " + name;
};

主要区别：

1. 提升行为（Hoisting）：

// 函数声明 - 完全提升
console.log(declaredFunction()); // "可以调用" (正常工作)

function declaredFunction() {
    return "可以调用";
}

// 函数表达式 - 变量提升，但函数不提升
console.log(expressedFunction); // undefined
// console.log(expressedFunction()); // TypeError: expressedFunction is not a function

var expressedFunction = function() {
    return "现在可以调用了";
};

console.log(expressedFunction()); // "现在可以调用了"

2. 条件创建：

var condition = true;

// 函数声明在条件语句中（不推荐，行为不一致）
if (condition) {
    function conditionalFunction() {
        return "在条件中声明";
    }
}

// 函数表达式在条件语句中（推荐）
var conditionalFunction2;
if (condition) {
    conditionalFunction2 = function() {
        return "在条件中表达";
    };
}

3. 立即执行函数表达式（IIFE）：

// 函数表达式可以立即执行
(function() {
    console.log("立即执行的函数表达式");
})();

// 或者
(function(name) {
    console.log("Hello, " + name);
})("World");

// 函数声明不能直接立即执行
// function() { console.log("错误"); }(); // 语法错误

函数表达式的变体：

匿名函数表达式：

var anonymous = function() {
    return "匿名函数";
};

console.log(anonymous.name); // "" (ES5中为空字符串)

具名函数表达式：

var named = function namedFunction() {
    return "具名函数表达式";
};

console.log(named.name); // "namedFunction"

// 名称只在函数内部可见
var factorial = function fact(n) {
    return n <= 1 ? 1 : n * fact(n - 1);  // 递归调用自己
};

console.log(factorial(5)); // 120
// console.log(fact(5)); // ReferenceError: fact is not defined

使用场景对比：

函数声明适用场景：

// 1. 需要在整个作用域中都能访问的函数
function utilityFunction() {
    return "工具函数";
}

// 2. 主要的业务逻辑函数
function processUserData(userData) {
    // 处理用户数据的主要逻辑
    return userData;
}

// 3. 递归函数（名称固定，便于调用）
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

函数表达式适用场景：

// 1. 条件性创建函数
var mathOperation;
if (needAdvancedMath) {
    mathOperation = function(a, b) {
        return Math.pow(a, b);
    };
} else {
    mathOperation = function(a, b) {
        return a * b;
    };
}

// 2. 作为其他函数的参数
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(num) {
    return num * 2;
});

// 3. 模块模式
var myModule = (function() {
    var privateVar = "私有变量";
    
    return {
        publicMethod: function() {
            return privateVar;
        }
    };
})();

// 4. 事件处理
button.addEventListener('click', function() {
    console.log("按钮被点击");
});

性能和内存考虑：

// 函数声明 - 在解析阶段就创建
function declared() {
    return "声明的函数";
}

// 函数表达式 - 在执行阶段创建
var expressed = function() {
    return "表达式函数";
};

// 在循环中创建函数的差异
var functions = [];

// 避免在循环中使用函数声明
for (var i = 0; i < 3; i++) {
    // 推荐：使用函数表达式
    functions.push(function(index) {
        return function() {
            return "函数 " + index;
        };
    }(i));
}

调试和错误处理：

// 具名函数表达式在调试时更有用
var processData = function processUserInformation(data) {
    try {
        // 处理数据
        return data.processed;
    } catch (error) {
        console.log("processUserInformation 中出错:", error);
        // 错误堆栈中会显示函数名 processUserInformation
        throw error;
    }
};

// 匿名函数在错误堆栈中显示为 anonymous
var process2 = function(data) {
    // 错误堆栈中显示为 anonymous 或类似的通用名称
    return data.processed;
};

最佳实践：

// 1. 优先使用函数声明，除非需要条件创建
function mainFunction() {
    return "主要功能";
}

// 2. 回调函数使用函数表达式
setTimeout(function() {
    console.log("延迟执行");
}, 1000);

// 3. 需要立即执行时使用函数表达式
(function initializeApp() {
    console.log("应用初始化");
})();

// 4. 模块模式使用函数表达式
var Calculator = (function() {
    var result = 0;
    
    return {
        add: function(value) {
            result += value;
            return this;
        },
        getResult: function() {
            return result;
        }
    };
})();

实际应用：

• 函数声明：用于定义主要的、稳定的业务逻辑函数
• 函数表达式：用于回调函数、条件创建、模块模式
• 具名函数表达式：在需要递归或更好调试信息时使用
• 立即执行函数表达式：用于创建作用域隔离和初始化代码

What does the for…in loop do? What should be noted when using it?

考察点：对象遍历和原型链的基础理解。

答案：

for...in 循环用于遍历对象的可枚举属性，包括对象自身的属性和从原型链继承的属性。它是 ES5 中遍历对象属性的主要方式。

基本语法和用法：

var obj = {
    name: "John",
    age: 25,
    city: "New York"
};

for (var key in obj) {
    console.log(key + ": " + obj[key]);
}
// 输出：
// name: John
// age: 25
// city: New York

遍历数组（不推荐）：

var array = ["a", "b", "c"];
array.customProperty = "自定义属性";

for (var index in array) {
    console.log(index + ": " + array[index]);
}
// 输出：
// 0: a
// 1: b
// 2: c
// customProperty: 自定义属性 (意外的输出)

重要注意事项：

1. 会遍历原型链上的属性：

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

Person.prototype.species = "Homo sapiens";
Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

var john = new Person("John");
john.age = 25;

for (var key in john) {
    console.log(key + ": " + john[key]);
}
// 输出：
// name: John
// age: 25
// species: Homo sapiens (来自原型)
// greet: function() {...} (来自原型)

2. 使用 hasOwnProperty 过滤自身属性：

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

Person.prototype.species = "Homo sapiens";

var john = new Person("John");
john.age = 25;

// 只遍历自身属性
for (var key in john) {
    if (john.hasOwnProperty(key)) {
        console.log(key + ": " + john[key]);
    }
}
// 输出：
// name: John
// age: 25

3. 遍历顺序不保证：

var obj = {};
obj[3] = "三";
obj[1] = "一";
obj[2] = "二";
obj["a"] = "字母a";
obj["b"] = "字母b";

for (var key in obj) {
    console.log(key + ": " + obj[key]);
}
// 在不同的 JavaScript 引擎中，输出顺序可能不同
// 现代浏览器通常按照：数字键（升序） → 字符串键（定义顺序）

4. 不适合遍历数组：

var fruits = ["apple", "banana", "orange"];
fruits.extraProperty = "not a fruit";

// 不推荐：for...in 遍历数组
for (var index in fruits) {
    console.log(fruits[index]);
}
// 输出包括：apple, banana, orange, not a fruit

// 推荐：使用传统 for 循环
for (var i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 只输出：apple, banana, orange

安全的遍历模式：

// 基本对象属性遍历
function forInSafe(obj) {
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            console.log(key, obj[key]);
        }
    }
}

// 创建一个安全的遍历函数
function getOwnProperties(obj) {
    var props = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            props.push(key);
        }
    }
    return props;
}

var person = {name: "John", age: 25};
console.log(getOwnProperties(person)); // ["name", "age"]

实际应用场景：

1. 对象属性复制：

function shallowCopy(source) {
    var target = {};
    for (var key in source) {
        if (source.hasOwnProperty(key)) {
            target[key] = source[key];
        }
    }
    return target;
}

var original = {name: "John", age: 25};
var copy = shallowCopy(original);

2. 对象属性验证：

function validateObject(obj, requiredFields) {
    for (var i = 0; i < requiredFields.length; i++) {
        var field = requiredFields[i];
        var found = false;
        
        for (var key in obj) {
            if (obj.hasOwnProperty(key) && key === field) {
                found = true;
                break;
            }
        }
        
        if (!found) {
            return false;
        }
    }
    return true;
}

3. 动态属性处理：

function processFormData(formData) {
    var processedData = {};
    
    for (var field in formData) {
        if (formData.hasOwnProperty(field)) {
            // 处理字符串字段
            if (typeof formData[field] === 'string') {
                processedData[field] = formData[field].trim();
            } else {
                processedData[field] = formData[field];
            }
        }
    }
    
    return processedData;
}

ES5 中的替代方法：

var obj = {name: "John", age: 25, city: "NYC"};

// 1. Object.keys() - 获取自身可枚举属性名数组
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    console.log(key + ": " + obj[key]);
}

// 2. 结合 forEach 使用
Object.keys(obj).forEach(function(key) {
    console.log(key + ": " + obj[key]);
});

性能考虑：

var obj = {};
for (var i = 0; i < 1000; i++) {
    obj["key" + i] = "value" + i;
}

// for...in 的性能测试
console.time("for...in with hasOwnProperty");
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        // 处理属性
    }
}
console.timeEnd("for...in with hasOwnProperty");

// Object.keys 的性能测试
console.time("Object.keys");
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    // 处理属性
}
console.timeEnd("Object.keys");

最佳实践：

• 总是使用 hasOwnProperty 检查属性是否为对象自身属性
• 不要用 for...in 遍历数组，使用传统 for 循环或 forEach
• 考虑使用 Object.keys() 获得更可控的遍历方式
• 注意遍历顺序：不要依赖特定的属性遍历顺序
• 性能敏感场景：比较 for…in 和 Object.keys 的性能表现

Are strings mutable in JavaScript?

考察点：对字符串特性的理解。

答案：

JavaScript 中的字符串是不可变的（immutable）。这意味着一旦创建了一个字符串，就不能修改它的内容。所有看起来"修改"字符串的操作实际上都是创建新的字符串。

字符串不可变性的证明：

var str = "Hello";
console.log(str[0]); // "H"

// 尝试修改字符串的某个字符
str[0] = "h";
console.log(str); // 仍然是 "Hello"，没有被修改

// 严格模式下会抛出错误
"use strict";
var str2 = "World";
// str2[0] = "w"; // TypeError: Cannot assign to read only property '0'

字符串操作创建新字符串：

var original = "Hello";
var modified = original + " World";

console.log(original); // "Hello" (原字符串未变)
console.log(modified); // "Hello World" (新字符串)

// 字符串方法都返回新字符串
var text = "JavaScript";
var upperCase = text.toUpperCase();
var slice = text.slice(0, 4);

console.log(text);      // "JavaScript" (原字符串不变)
console.log(upperCase); // "JAVASCRIPT" (新字符串)
console.log(slice);     // "Java" (新字符串)

常见字符串方法的不可变性：

var str = "Hello World";

// 这些方法都返回新字符串，不修改原字符串
console.log(str.charAt(0));           // "H"
console.log(str.substring(0, 5));     // "Hello"
console.log(str.indexOf("World"));    // 6
console.log(str.replace("World", "JS")); // "Hello JS"
console.log(str.split(" "));          // ["Hello", "World"]
console.log(str.toLowerCase());       // "hello world"
console.log(str.trim());              // "Hello World"

console.log(str); // 原字符串仍然是 "Hello World"

内存影响和性能考虑：

// 低效的字符串拼接（创建多个临时字符串）
function inefficientConcat() {
    var result = "";
    for (var i = 0; i < 1000; i++) {
        result += "a"; // 每次都创建新字符串
    }
    return result;
}

// 更高效的方法：使用数组
function efficientConcat() {
    var parts = [];
    for (var i = 0; i < 1000; i++) {
        parts.push("a");
    }
    return parts.join("");
}

console.time("inefficient");
inefficientConcat();
console.timeEnd("inefficient");

console.time("efficient");
efficientConcat();
console.timeEnd("efficient");

变量重新赋值 vs 字符串修改：

var str = "Hello";

// 这不是修改字符串，而是让变量指向新字符串
str = str + " World";  // 创建新字符串 "Hello World"
str = "Goodbye";       // 创建新字符串 "Goodbye"

// 原来的字符串 "Hello" 和 "Hello World" 变成垃圾，等待回收

字符串不可变性的实际应用：

1. 安全的字符串传递：

function processPassword(password) {
    // 字符串不可变，所以原密码不会被意外修改
    var processed = password.toLowerCase().trim();
    
    // 一些处理逻辑
    return processed;
}

var userPassword = "MySecret123";
var result = processPassword(userPassword);
console.log(userPassword); // 仍然是 "MySecret123"

2. 字符串作为对象键的可靠性：

var cache = {};
var key1 = "user_123";
var key2 = "user_123";

cache[key1] = "John";

// 字符串不可变性保证了键的一致性
console.log(cache[key2]); // "John" (能正确访问)
console.log(key1 === key2); // true (值相等)

3. 函数式编程的优势：

// 字符串操作是纯函数，没有副作用
function formatName(name) {
    return name.trim().toLowerCase().replace(/\s+/g, '_');
}

var originalName = "  John   Doe  ";
var formatted = formatName(originalName);

console.log(originalName); // "  John   Doe  " (未被修改)
console.log(formatted);    // "john_doe"

字符串构建的最佳实践：

// 少量拼接：使用 + 操作符
function simpleConcat(firstName, lastName) {
    return firstName + " " + lastName;
}

// 大量拼接：使用数组 join
function buildHTML(items) {
    var html = ["<ul>"];
    for (var i = 0; i < items.length; i++) {
        html.push("<li>" + items[i] + "</li>");
    }
    html.push("</ul>");
    return html.join("");
}

// 模板构建
function createMessage(name, age, city) {
    var parts = [
        "Hello, my name is ",
        name,
        ". I am ",
        age,
        " years old and I live in ",
        city,
        "."
    ];
    return parts.join("");
}

与可变数据类型的对比：

// 字符串（不可变）
var str = "Hello";
var str2 = str;
str = str + " World"; // 创建新字符串
console.log(str2);    // 仍然是 "Hello"

// 数组（可变）
var arr = [1, 2, 3];
var arr2 = arr;
arr.push(4);          // 修改原数组
console.log(arr2);    // [1, 2, 3, 4] (也被修改了)

调试和开发中的考虑：

// 字符串比较可以直接使用 === 
function compareStrings(str1, str2) {
    return str1 === str2; // 直接比较值
}

// 字符串在调试时很安全
function debugLog(message) {
    console.log("Debug: " + message);
    // message 不会被意外修改
}

实际应用：

• 数据安全：字符串传递时不用担心被意外修改
• 缓存键：字符串的不可变性使其适合作为缓存或映射的键
• 函数式编程：字符串操作天然符合纯函数要求
• 性能优化：理解不可变性有助于优化字符串处理性能
• 内存管理：了解字符串创建机制有助于避免内存浪费

What are parseInt() and parseFloat()? What are their differences?

考察点：数据类型转换方法的掌握。

答案：

parseInt() 和 parseFloat() 是 JavaScript 中用于将字符串转换为数字的全局函数。它们在解析规则、返回值类型和使用场景上有重要区别。

基本语法和功能：

parseInt() - 解析整数：

// 基本语法：parseInt(string, radix)
console.log(parseInt("42"));        // 42
console.log(parseInt("42.5"));      // 42 (忽略小数部分)
console.log(parseInt("42abc"));     // 42 (忽略后面的字符)
console.log(parseInt("  42  "));    // 42 (忽略前后空白)

parseFloat() - 解析浮点数：

// 基本语法：parseFloat(string)
console.log(parseFloat("42.5"));    // 42.5
console.log(parseFloat("42"));      // 42
console.log(parseFloat("42.5abc")); // 42.5 (忽略后面的字符)
console.log(parseFloat("  42.5  ")); // 42.5 (忽略前后空白)

主要区别：

1. 返回值类型：

console.log(parseInt("42"));        // 42 (整数)
console.log(parseInt("42.9"));      // 42 (截断小数部分)
console.log(parseFloat("42"));      // 42 (数字)
console.log(parseFloat("42.9"));    // 42.9 (保留小数)

// 类型检查
console.log(Number.isInteger(parseInt("42.9")));   // true
console.log(Number.isInteger(parseFloat("42.9"))); // false

2. 基数（radix）支持：

// parseInt 支持指定基数
console.log(parseInt("1010", 2));   // 10 (二进制转十进制)
console.log(parseInt("FF", 16));    // 255 (十六进制转十进制)
console.log(parseInt("77", 8));     // 63 (八进制转十进制)

// parseFloat 不支持基数，始终按十进制解析
console.log(parseFloat("1010"));    // 1010
console.log(parseFloat("FF"));      // NaN (不是有效的十进制数)

3. 解析规则差异：

// 科学记数法
console.log(parseInt("1e2"));       // 1 (遇到 'e' 停止解析)
console.log(parseFloat("1e2"));     // 100 (正确解析科学记数法)
console.log(parseFloat("1.5e2"));   // 150

// 十六进制前缀
console.log(parseInt("0x10"));      // 16 (识别十六进制前缀)
console.log(parseFloat("0x10"));    // 0 (遇到 'x' 停止解析)

错误处理和边界情况：

// 无效输入
console.log(parseInt(""));          // NaN
console.log(parseInt("abc"));       // NaN
console.log(parseFloat(""));        // NaN
console.log(parseFloat("abc"));     // NaN

// 特殊值
console.log(parseInt(null));        // NaN
console.log(parseInt(undefined));   // NaN
console.log(parseFloat(null));      // NaN
console.log(parseFloat(undefined)); // NaN

// 数字类型输入
console.log(parseInt(42.9));        // 42
console.log(parseFloat(42.9));      // 42.9

parseInt 基数的重要性：

// 不指定基数的潜在问题（ES5 中）
console.log(parseInt("010"));       // 可能是 8 或 10，取决于实现
console.log(parseInt("08"));        // 可能是 0 或 8

// 总是指定基数（推荐）
console.log(parseInt("010", 10));   // 10 (明确十进制)
console.log(parseInt("010", 8));    // 8 (明确八进制)
console.log(parseInt("08", 10));    // 8 (明确十进制)

// 常见基数
console.log(parseInt("1010", 2));   // 10 (二进制)
console.log(parseInt("777", 8));    // 511 (八进制)
console.log(parseInt("FF", 16));    // 255 (十六进制)

实际应用场景：

parseInt 应用场景：

// 解析整数 ID
function getUserId(idString) {
    var id = parseInt(idString, 10);
    return isNaN(id) ? null : id;
}

// 分页参数处理
function getPageNumber(pageParam) {
    var page = parseInt(pageParam, 10);
    return page > 0 ? page : 1;
}

// CSS 像素值解析
function parsePixelValue(cssValue) {
    // "20px" → 20
    return parseInt(cssValue, 10);
}

console.log(parsePixelValue("20px"));  // 20
console.log(parsePixelValue("1.5em")); // 1

parseFloat 应用场景：

// 价格解析
function parsePrice(priceString) {
    var price = parseFloat(priceString);
    return isNaN(price) ? 0 : price;
}

// 坐标解析
function parseCoordinate(coordString) {
    return parseFloat(coordString);
}

// 科学记数法处理
function parseScientific(scientificString) {
    return parseFloat(scientificString);
}

console.log(parsePrice("$19.99"));         // 19.99
console.log(parseCoordinate("123.456"));   // 123.456
console.log(parseScientific("1.5e3"));     // 1500

与其他转换方法的比较：

var testStrings = ["42", "42.5", "42abc", " 42 ", "", "abc"];

testStrings.forEach(function(str) {
    console.log("输入: '" + str + "'");
    console.log("parseInt:", parseInt(str, 10));
    console.log("parseFloat:", parseFloat(str));
    console.log("Number:", Number(str));
    console.log("+ 操作符:", +str);
    console.log("---");
});

// 主要区别：
// parseInt/parseFloat: 部分解析，遇到无效字符停止
// Number/+: 全字符串必须是有效数字，否则返回 NaN

输入验证和安全使用：

// 安全的解析函数
function safeParseInt(value, defaultValue) {
    if (typeof value !== 'string') {
        value = String(value);
    }
    
    var result = parseInt(value, 10);
    return isNaN(result) ? (defaultValue || 0) : result;
}

function safeParseFloat(value, defaultValue) {
    if (typeof value !== 'string') {
        value = String(value);
    }
    
    var result = parseFloat(value);
    return isNaN(result) ? (defaultValue || 0) : result;
}

// 表单数据处理
function processFormData(formData) {
    return {
        age: safeParseInt(formData.age),
        salary: safeParseFloat(formData.salary),
        page: safeParseInt(formData.page, 1)
    };
}

性能考虑：

// 性能测试示例
var testData = ["123", "123.456", "123abc", "1e3"];
var iterations = 100000;

console.time("parseInt");
for (var i = 0; i < iterations; i++) {
    for (var j = 0; j < testData.length; j++) {
        parseInt(testData[j], 10);
    }
}
console.timeEnd("parseInt");

console.time("parseFloat");
for (var i = 0; i < iterations; i++) {
    for (var j = 0; j < testData.length; j++) {
        parseFloat(testData[j]);
    }
}
console.timeEnd("parseFloat");

最佳实践：

// 1. 总是为 parseInt 指定基数
var num = parseInt(userInput, 10);

// 2. 验证解析结果
function parseAndValidate(input, type) {
    var result;
    
    if (type === 'int') {
        result = parseInt(input, 10);
    } else if (type === 'float') {
        result = parseFloat(input);
    }
    
    if (isNaN(result)) {
        throw new Error("无效的数字输入: " + input);
    }
    
    return result;
}

// 3. 处理边界情况
function robustParse(input, type, min, max) {
    var result = type === 'int' ? 
        parseInt(input, 10) : 
        parseFloat(input);
    
    if (isNaN(result)) return null;
    if (typeof min === 'number' && result < min) return min;
    if (typeof max === 'number' && result > max) return max;
    
    return result;
}

实际应用：

• 用户输入处理：解析表单中的数字输入
• URL 参数解析：处理查询字符串中的数字参数
• 配置文件解析：将配置字符串转换为数字值
• 数据清洗：从混合内容中提取数字信息
• API 响应处理：解析服务器返回的字符串格式数字

What are global variables? What problems can arise from using global variables?

考察点：变量作用域和代码质量意识。

答案：

全局变量是在全局作用域中声明的变量，可以在代码的任何地方访问。虽然使用方便，但会带来诸多问题，应该谨慎使用。

全局变量的定义方式：

// 1. 在全局作用域中使用 var 声明
var globalVar1 = "全局变量1";

// 2. 不使用 var 声明（隐式全局变量，不推荐）
globalVar2 = "全局变量2";

// 3. 作为 window 对象的属性（浏览器环境）
window.globalVar3 = "全局变量3";

// 4. 函数外部声明的变量
function someFunction() {
    // 函数内部可以访问全局变量
    console.log(globalVar1); // "全局变量1"
}

全局变量的问题：

1. 命名冲突（Name Collision）：

// 库 A
var utils = {
    format: function(str) {
        return "A: " + str;
    }
};

// 库 B（覆盖了库 A 的 utils）
var utils = {
    format: function(str) {
        return "B: " + str;
    }
};

console.log(utils.format("test")); // "B: test" (库 A 的功能丢失)

// 第三方库可能意外覆盖全局变量
var $ = "我的变量";
// 引入 jQuery 后
// var $ = jQuery; // $ 被覆盖

2. 意外修改和副作用：

var counter = 0;

function incrementA() {
    counter++; // 修改全局变量
}

function incrementB() {
    counter += 2; // 也修改同一个全局变量
}

function displayCounter() {
    console.log("Counter: " + counter);
}

incrementA(); // counter = 1
incrementB(); // counter = 3
displayCounter(); // "Counter: 3" (可能不是期望的结果)

// 在复杂应用中很难追踪谁修改了全局变量

3. 内存泄漏风险：

var largeData = []; // 全局变量

function processData() {
    // 向全局数组添加大量数据
    for (var i = 0; i < 100000; i++) {
        largeData.push({id: i, data: "large data " + i});
    }
}

// 全局变量不会被垃圾回收，即使不再需要
// largeData 会一直占用内存，直到页面关闭

4. 测试困难：

var appState = {
    isLoggedIn: false,
    currentUser: null
};

function login(user) {
    appState.isLoggedIn = true;
    appState.currentUser = user;
}

function logout() {
    appState.isLoggedIn = false;
    appState.currentUser = null;
}

// 测试困难：每个测试都需要重置全局状态
function testLogin() {
    // 需要先重置全局状态
    appState.isLoggedIn = false;
    appState.currentUser = null;
    
    login({name: "John"});
    // 测试逻辑...
}

5. 代码耦合度高：

var currentTheme = "light";

function applyTheme() {
    if (currentTheme === "dark") {
        document.body.className = "dark-theme";
    } else {
        document.body.className = "light-theme";
    }
}

function saveUserPreference(theme) {
    currentTheme = theme; // 直接依赖全局变量
    applyTheme();
}

// 所有函数都依赖 currentTheme 全局变量
// 修改 currentTheme 的结构会影响多个函数

避免全局变量的解决方案：

1. 使用命名空间模式：

// 创建一个全局对象来包含所有相关功能
var MyApp = MyApp || {};

MyApp.utils = {
    format: function(str) {
        return "Formatted: " + str;
    },
    
    validate: function(input) {
        return input && input.length > 0;
    }
};

MyApp.config = {
    apiUrl: "https://api.example.com",
    timeout: 5000
};

// 使用时通过命名空间访问
console.log(MyApp.utils.format("test"));

2. 立即执行函数表达式（IIFE）：

// 创建私有作用域，避免污染全局空间
(function() {
    var privateVar = "私有变量";
    
    function privateFunction() {
        return privateVar;
    }
    
    // 只暴露需要的接口到全局
    window.MyModule = {
        getPrivateVar: function() {
            return privateFunction();
        }
    };
})();

// 外部无法直接访问 privateVar 和 privateFunction
console.log(MyModule.getPrivateVar()); // "私有变量"

3. 模块模式：

var Calculator = (function() {
    var result = 0; // 私有变量
    
    function add(value) {
        result += value;
        return Calculator; // 支持链式调用
    }
    
    function subtract(value) {
        result -= value;
        return Calculator;
    }
    
    function getResult() {
        return result;
    }
    
    function reset() {
        result = 0;
        return Calculator;
    }
    
    // 公开接口
    return {
        add: add,
        subtract: subtract,
        getResult: getResult,
        reset: reset
    };
})();

// 使用模块
Calculator.add(10).subtract(3).add(5);
console.log(Calculator.getResult()); // 12

4. 参数传递代替全局访问：

// 不好的方式：依赖全局变量
var config = {theme: "dark", language: "en"};

function renderPage() {
    if (config.theme === "dark") {
        // 渲染暗色主题
    }
}

// 好的方式：通过参数传递
function renderPage(config) {
    if (config.theme === "dark") {
        // 渲染暗色主题
    }
}

// 调用时传递配置
var appConfig = {theme: "dark", language: "en"};
renderPage(appConfig);

5. 使用闭包管理状态：

function createCounter(initialValue) {
    var count = initialValue || 0;
    
    return {
        increment: function() {
            count++;
            return count;
        },
        
        decrement: function() {
            count--;
            return count;
        },
        
        getValue: function() {
            return count;
        }
    };
}

// 创建独立的计数器实例
var counter1 = createCounter(0);
var counter2 = createCounter(100);

console.log(counter1.increment()); // 1
console.log(counter2.increment()); // 101
// 两个计数器互不影响

检测和清理全局变量：

// 检测意外的全局变量
(function() {
    var knownGlobals = ['window', 'document', 'console', 'setTimeout'];
    
    for (var prop in window) {
        if (window.hasOwnProperty(prop) && knownGlobals.indexOf(prop) === -1) {
            console.warn("发现全局变量: " + prop);
        }
    }
})();

// 使用严格模式防止意外全局变量
(function() {
    "use strict";
    
    // myVar = "test"; // 这会抛出 ReferenceError
    var myVar = "test"; // 正确的声明方式
})();

最佳实践：

• 最小化全局变量使用：只在必要时使用全局变量
• 使用命名空间：将相关功能组织到单一全局对象中
• 模块化设计：使用 IIFE 或模块模式创建私有作用域
• 明确声明：总是使用 var 声明变量
• 严格模式：使用 "use strict" 防止意外全局变量
• 代码审查：定期检查和清理不必要的全局变量

How to create objects in JavaScript? What methods are available?

考察点：对象创建方法的基础掌握。

答案：

JavaScript 中有多种创建对象的方式，每种方法都有其特点和适用场景。了解这些方法有助于选择最适合的对象创建模式。

1. 对象字面量（Object Literal）：

// 最简单直接的方式
var person = {
    name: "John",
    age: 25,
    greet: function() {
        return "Hello, I'm " + this.name;
    }
};

console.log(person.name);    // "John"
console.log(person.greet()); // "Hello, I'm John"

// 动态添加属性
person.city = "New York";
person.sayAge = function() {
    return "I'm " + this.age + " years old";
};

2. Object 构造函数：

// 使用 new Object()
var person = new Object();
person.name = "John";
person.age = 25;
person.greet = function() {
    return "Hello, I'm " + this.name;
};

// 等价的简化写法
var person2 = {};
person2.name = "Jane";
person2.age = 30;

3. 自定义构造函数：

// 定义构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        return "Hello, I'm " + this.name;
    };
}

// 创建实例
var person1 = new Person("John", 25);
var person2 = new Person("Jane", 30);

console.log(person1.greet()); // "Hello, I'm John"
console.log(person2.greet()); // "Hello, I'm Jane"

// 检查实例类型
console.log(person1 instanceof Person); // true

4. 使用原型模式：

// 构造函数 + 原型
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在原型上定义方法（所有实例共享）
Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

Person.prototype.species = "Homo sapiens";

var person1 = new Person("John", 25);
var person2 = new Person("Jane", 30);

// 实例共享原型上的方法和属性
console.log(person1.greet === person2.greet); // true (同一个函数)
console.log(person1.species); // "Homo sapiens"

5. Object.create() 方法（ES5）：

// 基于已有对象创建新对象
var personPrototype = {
    greet: function() {
        return "Hello, I'm " + this.name;
    },
    
    setAge: function(age) {
        this.age = age;
    }
};

// 创建继承自 personPrototype 的对象
var person = Object.create(personPrototype);
person.name = "John";
person.age = 25;

console.log(person.greet()); // "Hello, I'm John"

// 可以指定属性描述符
var person2 = Object.create(personPrototype, {
    name: {
        value: "Jane",
        writable: true,
        enumerable: true
    },
    age: {
        value: 30,
        writable: true,
        enumerable: true
    }
});

6. 工厂模式：

// 工厂函数创建对象
function createPerson(name, age, job) {
    var person = {};
    person.name = name;
    person.age = age;
    person.job = job;
    person.greet = function() {
        return "Hello, I'm " + this.name + ", I'm a " + this.job;
    };
    return person;
}

var person1 = createPerson("John", 25, "Developer");
var person2 = createPerson("Jane", 30, "Designer");

console.log(person1.greet()); // "Hello, I'm John, I'm a Developer"

// 注意：工厂模式创建的对象没有特定的类型标识
console.log(person1 instanceof Object); // true
// console.log(person1 instanceof Person); // 无法判断具体类型

各种方法的比较：

// 性能比较示例
function performanceTest() {
    var iterations = 100000;
    var start, end;
    
    // 1. 对象字面量
    start = Date.now();
    for (var i = 0; i < iterations; i++) {
        var obj1 = {name: "John", age: 25};
    }
    end = Date.now();
    console.log("对象字面量: " + (end - start) + "ms");
    
    // 2. new Object()
    start = Date.now();
    for (var i = 0; i < iterations; i++) {
        var obj2 = new Object();
        obj2.name = "John";
        obj2.age = 25;
    }
    end = Date.now();
    console.log("new Object(): " + (end - start) + "ms");
    
    // 3. 构造函数
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    
    start = Date.now();
    for (var i = 0; i < iterations; i++) {
        var obj3 = new Person("John", 25);
    }
    end = Date.now();
    console.log("构造函数: " + (end - start) + "ms");
}

混合使用模式：

// 构造函数 + 原型的混合模式（推荐）
function Person(name, age) {
    // 实例属性
    this.name = name;
    this.age = age;
    this.friends = []; // 每个实例有独立的数组
}

// 共享方法
Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

Person.prototype.addFriend = function(friend) {
    this.friends.push(friend);
};

// 静态属性
Person.species = "Homo sapiens";

var person1 = new Person("John", 25);
var person2 = new Person("Jane", 30);

person1.addFriend("Alice");
person2.addFriend("Bob");

console.log(person1.friends); // ["Alice"]
console.log(person2.friends); // ["Bob"] (独立的数组)

实际应用场景：

简单数据对象 - 使用字面量：

var config = {
    apiUrl: "https://api.example.com",
    timeout: 5000,
    retries: 3
};

var userInfo = {
    id: 123,
    name: "John",
    email: "[email protected]"
};

需要多个相似实例 - 使用构造函数：

function Task(title, priority) {
    this.title = title;
    this.priority = priority || "normal";
    this.completed = false;
    this.createdAt = new Date();
}

Task.prototype.complete = function() {
    this.completed = true;
    this.completedAt = new Date();
};

Task.prototype.getStatus = function() {
    return this.completed ? "完成" : "进行中";
};

var task1 = new Task("学习 JavaScript", "high");
var task2 = new Task("写文档", "low");

继承和原型链 - 使用 Object.create：

// 基类
var Animal = {
    init: function(name) {
        this.name = name;
    },
    
    makeSound: function() {
        return "Some sound";
    }
};

// 继承
var Dog = Object.create(Animal);
Dog.makeSound = function() {
    return "Woof!";
};

Dog.wagTail = function() {
    return this.name + " wags tail";
};

var myDog = Object.create(Dog);
myDog.init("Buddy");
console.log(myDog.makeSound()); // "Woof!"
console.log(myDog.wagTail());   // "Buddy wags tail"

选择指南：

• 对象字面量：简单的数据对象，配置对象
• 构造函数：需要创建多个相似实例，需要类型检查
• Object.create()：需要精确控制原型链，实现继承
• 工厂模式：创建逻辑复杂，不需要类型标识
• 混合模式：大多数面向对象的应用场景

最佳实践：

• 根据具体需求选择合适的创建方式
• 优先使用对象字面量创建简单对象
• 使用构造函数 + 原型实现面向对象编程
• 避免在构造函数中定义方法（影响性能）
• 合理使用 Object.create() 实现继承关系

Please explain how the ‘this’ keyword behaves in different scenarios.

考察点：JavaScript 中最核心也最复杂的概念之一。

答案：

this 关键字的值取决于函数的调用方式，而不是函数定义的位置。理解 this 的绑定规则对于掌握 JavaScript 至关重要。

this 绑定的四种规则：

1. 默认绑定（Default Binding）：

function globalFunction() {
    console.log(this); // 全局对象 (浏览器中是 window)
}

globalFunction(); // this 指向全局对象

// 严格模式下的差异
function strictFunction() {
    "use strict";
    console.log(this); // undefined
}

strictFunction(); // 严格模式下 this 是 undefined

2. 隐式绑定（Implicit Binding）：

var obj = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
        console.log(this); // obj 对象
    }
};

obj.greet(); // this 指向 obj，输出 "Hello, John"

// 多层对象嵌套
var person = {
    name: "Alice",
    address: {
        city: "New York",
        getCity: function() {
            console.log(this.city); // "New York"
            console.log(this); // address 对象
        }
    }
};

person.address.getCity(); // this 指向 address 对象

3. 显式绑定（Explicit Binding）：

function introduce() {
    console.log("My name is " + this.name);
}

var person1 = {name: "John"};
var person2 = {name: "Jane"};

// 使用 call
introduce.call(person1); // "My name is John"
introduce.call(person2); // "My name is Jane"

// 使用 apply
introduce.apply(person1); // "My name is John"

// 使用 bind
var boundIntroduce = introduce.bind(person1);
boundIntroduce(); // "My name is John"

4. new 绑定（new Binding）：

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log("Hello, I'm " + this.name);
    };
    
    console.log(this); // 新创建的对象实例
}

var john = new Person("John");
john.greet(); // this 指向 john 实例

常见的 this 指向场景：

函数作为对象方法调用：

var calculator = {
    result: 0,
    
    add: function(value) {
        this.result += value; // this 指向 calculator
        return this;
    },
    
    multiply: function(value) {
        this.result *= value; // this 指向 calculator
        return this;
    },
    
    getResult: function() {
        return this.result; // this 指向 calculator
    }
};

calculator.add(5).multiply(2); // 链式调用
console.log(calculator.getResult()); // 10

函数赋值后调用（this 丢失）：

var obj = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

obj.greet(); // "Hello, John" (this 是 obj)

// 将方法赋值给变量
var greetFunc = obj.greet;
greetFunc(); // "Hello, undefined" (this 是全局对象)

// 解决方案：使用 bind
var boundGreet = obj.greet.bind(obj);
boundGreet(); // "Hello, John"

事件处理中的 this：

var button = document.getElementById("myButton");

var handler = {
    message: "Button clicked!",
    
    handleClick: function() {
        console.log(this.message); // 在事件处理中，this 通常指向触发事件的元素
        console.log(this); // button 元素
    }
};

// 直接绑定会丢失原始的 this
button.addEventListener('click', handler.handleClick); // this 指向 button

// 使用 bind 保持 this 指向
button.addEventListener('click', handler.handleClick.bind(handler)); // this 指向 handler

回调函数中的 this：

function Timer() {
    this.seconds = 0;
    
    // 错误方式：this 会丢失
    setInterval(function() {
        this.seconds++; // this 指向全局对象
        console.log(this.seconds); // undefined 或报错
    }, 1000);
}

function TimerCorrect() {
    var self = this; // 保存 this 引用
    this.seconds = 0;
    
    // 方式一：使用变量保存 this
    setInterval(function() {
        self.seconds++;
        console.log(self.seconds);
    }, 1000);
}

function TimerBind() {
    this.seconds = 0;
    
    // 方式二：使用 bind
    setInterval(function() {
        this.seconds++;
        console.log(this.seconds);
    }.bind(this), 1000);
}

箭头函数中的 this（注：ES6 特性，但需要了解）：

// 注意：ES5 中没有箭头函数，这里仅作对比说明
var obj = {
    name: "John",
    
    // 普通函数
    regularMethod: function() {
        console.log(this.name); // "John"
        
        setTimeout(function() {
            console.log(this.name); // undefined (this 丢失)
        }, 1000);
    },
    
    // 在 ES5 中的解决方案
    es5Solution: function() {
        var self = this;
        console.log(this.name); // "John"
        
        setTimeout(function() {
            console.log(self.name); // "John" (使用保存的引用)
        }, 1000);
    }
};

call、apply、bind 的详细用法：

function greet(greeting, punctuation) {
    console.log(greeting + ", " + this.name + punctuation);
}

var person = {name: "John"};

// call：逐个传递参数
greet.call(person, "Hello", "!"); // "Hello, John!"

// apply：参数以数组形式传递
greet.apply(person, ["Hi", "."]);  // "Hi, John."

// bind：创建绑定函数，稍后调用
var boundGreet = greet.bind(person, "Hey");
boundGreet("!!!"); // "Hey, John!!!"

复杂场景中的 this：

var module = {
    x: 42,
    
    getX: function() {
        return this.x;
    }
};

var unboundGetX = module.getX;
console.log(unboundGetX()); // undefined (this 指向全局)

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // 42

// 嵌套函数中的 this
var obj = {
    name: "outer",
    
    outerMethod: function() {
        console.log(this.name); // "outer"
        
        function innerFunction() {
            console.log(this.name); // undefined (内部函数的 this 指向全局)
        }
        
        innerFunction();
        
        // 修正方法
        var self = this;
        function correctedInner() {
            console.log(self.name); // "outer"
        }
        
        correctedInner();
    }
};

this 绑定的优先级：

function test() {
    console.log(this.name);
}

var obj1 = {name: "obj1", test: test};
var obj2 = {name: "obj2"};

// 1. new 绑定优先级最高
function Test(name) {
    this.name = name;
}

var boundTest = Test.bind(obj1);
var instance = new boundTest("new binding"); // this 指向新实例
console.log(instance.name); // "new binding"

// 2. 显式绑定优先于隐式绑定
obj1.test.call(obj2); // "obj2" (call 覆盖了隐式绑定)

// 3. 隐式绑定优先于默认绑定
obj1.test(); // "obj1" (隐式绑定)

实际应用和最佳实践：

// 创建一个安全的方法绑定工具
function createBoundMethod(obj, methodName) {
    return function() {
        return obj[methodName].apply(obj, arguments);
    };
}

var calculator = {
    result: 0,
    add: function(value) {
        this.result += value;
        return this.result;
    }
};

var safeAdd = createBoundMethod(calculator, 'add');
console.log(safeAdd(5)); // 5

// 链式调用模式
var ChainableObject = function() {
    this.value = 0;
};

ChainableObject.prototype.add = function(num) {
    this.value += num;
    return this; // 返回 this 支持链式调用
};

ChainableObject.prototype.multiply = function(num) {
    this.value *= num;
    return this;
};

var chain = new ChainableObject();
chain.add(5).multiply(2).add(3);
console.log(chain.value); // 13

调试 this 的技巧：

// 添加调试辅助函数
function debugThis(context) {
    console.log("this 指向:", this);
    console.log("预期上下文:", context);
    console.log("this === context:", this === context);
}

// 在方法中使用
var obj = {
    name: "test",
    method: function() {
        debugThis.call(this, obj);
    }
};

最佳实践：

• 明确 this 的绑定规则：理解四种绑定规则的优先级
• 使用 bind 保持 this：在回调函数中使用 bind 保持正确的 this 指向
• 保存 this 引用：使用 var self = this 模式
• 避免过度嵌套：减少函数嵌套以降低 this 混乱的可能性
• 使用严格模式：帮助发现 this 相关的问题

What is a closure? What are its use cases? What are its drawbacks?

考察点：对词法作用域、内存管理和高级函数应用的理解。

答案：

闭包是指一个函数可以访问其定义时所在的词法作用域，即使该函数在其词法作用域之外被调用。闭包让函数能够"记住"并访问其外部作用域的变量。

闭包的基本原理：

function outerFunction(x) {
    // 外部函数的变量
    var outerVariable = x;
    
    // 内部函数形成闭包
    function innerFunction(y) {
        // 可以访问外部函数的变量
        return outerVariable + y;
    }
    
    return innerFunction;
}

var closure = outerFunction(10);
console.log(closure(5)); // 15

// outerFunction 已执行完毕，但 innerFunction 仍能访问 outerVariable

闭包的工作机制：

function createCounter() {
    var count = 0; // 私有变量
    
    return function() {
        count++; // 访问外部变量
        return count;
    };
}

var counter1 = createCounter();
var counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1 (独立的闭包环境)
console.log(counter1()); // 3

闭包的应用场景：

1. 数据私有化和封装：

function BankAccount(initialBalance) {
    var balance = initialBalance; // 私有变量
    
    return {
        deposit: function(amount) {
            if (amount > 0) {
                balance += amount;
                return balance;
            }
            throw new Error("存款金额必须大于0");
        },
        
        withdraw: function(amount) {
            if (amount > 0 && amount <= balance) {
                balance -= amount;
                return balance;
            }
            throw new Error("取款金额无效");
        },
        
        getBalance: function() {
            return balance;
        }
    };
    
    // balance 变量无法从外部直接访问
}

var account = BankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(500);              // 1500
account.withdraw(200);             // 1300
// console.log(account.balance);   // undefined (无法直接访问)

2. 函数工厂模式：

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

var double = createMultiplier(2);
var triple = createMultiplier(3);
var square = createMultiplier(4);

console.log(double(5));  // 10
console.log(triple(5));  // 15
console.log(square(5));  // 20

// 创建特定功能的函数
function createGreeter(greeting) {
    return function(name) {
        return greeting + ", " + name + "!";
    };
}

var sayHello = createGreeter("Hello");
var sayGoodbye = createGreeter("Goodbye");

console.log(sayHello("John"));    // "Hello, John!"
console.log(sayGoodbye("Jane"));  // "Goodbye, Jane!"

3. 模块模式：

var Calculator = (function() {
    var result = 0; // 私有状态
    var history = []; // 私有历史记录
    
    function addToHistory(operation, value, newResult) {
        history.push({
            operation: operation,
            value: value,
            result: newResult,
            timestamp: new Date()
        });
    }
    
    return {
        add: function(value) {
            result += value;
            addToHistory('add', value, result);
            return this;
        },
        
        subtract: function(value) {
            result -= value;
            addToHistory('subtract', value, result);
            return this;
        },
        
        multiply: function(value) {
            result *= value;
            addToHistory('multiply', value, result);
            return this;
        },
        
        getResult: function() {
            return result;
        },
        
        getHistory: function() {
            return history.slice(); // 返回副本，防止外部修改
        },
        
        clear: function() {
            result = 0;
            history = [];
            return this;
        }
    };
})();

Calculator.add(10).multiply(2).subtract(5);
console.log(Calculator.getResult()); // 15
console.log(Calculator.getHistory()); // 操作历史

4. 事件处理和回调：

function setupEventHandlers() {
    var clickCount = 0;
    
    document.getElementById('button').addEventListener('click', function() {
        clickCount++;
        console.log('按钮被点击了 ' + clickCount + ' 次');
    });
    
    // 返回一个函数来获取点击次数
    return function() {
        return clickCount;
    };
}

var getClickCount = setupEventHandlers();

// 防抖函数实现
function debounce(func, delay) {
    var timeoutId;
    
    return function() {
        var context = this;
        var args = arguments;
        
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            func.apply(context, args);
        }, delay);
    };
}

var debouncedSearch = debounce(function(query) {
    console.log('搜索: ' + query);
}, 300);

5. 循环中的闭包应用：

// 常见问题：循环中的异步操作
function createButtons() {
    var buttons = [];
    
    for (var i = 0; i < 3; i++) {
        // 错误方式：所有按钮都会显示 3
        buttons[i] = function() {
            console.log('按钮 ' + i + ' 被点击'); // i 始终是 3
        };
    }
    
    return buttons;
}

// 解决方案1：使用闭包
function createButtonsCorrect() {
    var buttons = [];
    
    for (var i = 0; i < 3; i++) {
        buttons[i] = (function(index) {
            return function() {
                console.log('按钮 ' + index + ' 被点击');
            };
        })(i); // 立即执行，传入当前的 i 值
    }
    
    return buttons;
}

// 解决方案2：使用 bind
function createButtonsBind() {
    var buttons = [];
    
    function clickHandler(index) {
        console.log('按钮 ' + index + ' 被点击');
    }
    
    for (var i = 0; i < 3; i++) {
        buttons[i] = clickHandler.bind(null, i);
    }
    
    return buttons;
}

闭包的缺点和问题：

1. 内存泄漏风险：

// 可能导致内存泄漏的例子
function problemmaticClosure() {
    var largeData = new Array(1000000).fill('data'); // 大量数据
    var element = document.getElementById('someElement');
    
    element.onclick = function() {
        // 这个函数持有对 largeData 的引用
        console.log('clicked');
    };
    
    return function() {
        // 即使这个返回函数不使用 largeData
        // largeData 仍然不会被垃圾回收
        return "some result";
    };
}

// 改进版本
function improvedClosure() {
    var element = document.getElementById('someElement');
    
    element.onclick = function() {
        console.log('clicked');
    };
    
    // 不引用不必要的变量
    return function() {
        return "some result";
    };
}

2. 性能影响：

// 性能测试：闭包 vs 普通函数
function normalFunction(a, b) {
    return a + b;
}

function createClosureFunction() {
    var cache = {};
    
    return function(a, b) {
        var key = a + ',' + b;
        if (!(key in cache)) {
            cache[key] = a + b;
        }
        return cache[key];
    };
}

var closureFunction = createClosureFunction();

// 性能测试
console.time('normal function');
for (var i = 0; i < 1000000; i++) {
    normalFunction(i, i + 1);
}
console.timeEnd('normal function');

console.time('closure function');
for (var i = 0; i < 1000000; i++) {
    closureFunction(i, i + 1);
}
console.timeEnd('closure function');

3. 调试困难：

function complexClosure() {
    var privateVar1 = "value1";
    var privateVar2 = "value2";
    
    function innerFunction1() {
        var localVar = "local";
        
        return function() {
            // 在调试时很难追踪这些变量的值
            return privateVar1 + localVar;
        };
    }
    
    function innerFunction2() {
        return function() {
            return privateVar2;
        };
    }
    
    return {
        method1: innerFunction1(),
        method2: innerFunction2()
    };
}

闭包的最佳实践：

// 1. 避免不必要的闭包
function unnecessary() {
    var x = 10;
    
    // 不好：创建了不必要的闭包
    return function(y) {
        return y * 2; // 没有使用外部变量 x
    };
}

// 好：直接返回函数
function better() {
    return function(y) {
        return y * 2;
    };
}

// 2. 及时清理引用
function properCleanup() {
    var element = document.getElementById('button');
    var data = {/* 一些数据 */};
    
    function clickHandler() {
        // 使用 data
        console.log(data);
    }
    
    element.addEventListener('click', clickHandler);
    
    // 返回清理函数
    return function cleanup() {
        element.removeEventListener('click', clickHandler);
        element = null;
        data = null;
    };
}

// 3. 使用弱引用模式
function createManager() {
    var items = [];
    
    return {
        add: function(item) {
            items.push(item);
        },
        
        clear: function() {
            items = []; // 清理引用
        },
        
        // 提供安全的访问方式
        getItems: function() {
            return items.slice(); // 返回副本
        }
    };
}

实际应用示例：

// 配置管理器
function createConfig() {
    var config = {};
    var locked = false;
    
    return {
        set: function(key, value) {
            if (locked) {
                throw new Error("配置已锁定，无法修改");
            }
            config[key] = value;
        },
        
        get: function(key) {
            return config[key];
        },
        
        lock: function() {
            locked = true;
        },
        
        isLocked: function() {
            return locked;
        }
    };
}

// 缓存装饰器
function memoize(fn) {
    var cache = {};
    
    return function() {
        var key = JSON.stringify(arguments);
        
        if (!(key in cache)) {
            cache[key] = fn.apply(this, arguments);
        }
        
        return cache[key];
    };
}

var expensiveFunction = memoize(function(n) {
    console.log('计算中...');
    return n * n;
});

console.log(expensiveFunction(5)); // 计算中... 25
console.log(expensiveFunction(5)); // 25 (从缓存获取)

实际应用：

• 模块化编程：创建私有作用域和公共接口
• 事件处理：保持状态和上下文
• 函数式编程：柯里化、部分应用等高级技术
• 设计模式：单例模式、工厂模式等的实现
• 异步编程：回调函数中保持状态和上下文

Please explain prototype and prototype chain.

考察点：对 JavaScript 面向对象核心——原型继承的理解。

答案：

原型和原型链是 JavaScript 实现继承和对象属性共享的核心机制。每个 JavaScript 对象都有一个内部链接指向另一个对象，这个对象就是原型。

原型的基本概念：

// 每个函数都有一个 prototype 属性
function Person(name) {
    this.name = name;
}

// 在原型上添加方法
Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

Person.prototype.species = "Homo sapiens";

// 创建实例
var john = new Person("John");
var jane = new Person("Jane");

// 实例可以访问原型上的属性和方法
console.log(john.greet());        // "Hello, I'm John"
console.log(john.species);        // "Homo sapiens"
console.log(jane.greet());        // "Hello, I'm Jane"

// 所有实例共享原型上的方法
console.log(john.greet === jane.greet); // true

原型链的工作原理：

// 原型链查找过程
function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    return this.name + " is eating";
};

function Dog(name, breed) {
    Animal.call(this, name); // 调用父构造函数
    this.breed = breed;
}

// 建立原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    return this.name + " is barking";
};

var buddy = new Dog("Buddy", "Golden Retriever");

// 属性查找顺序：
// 1. buddy 实例本身
// 2. Dog.prototype
// 3. Animal.prototype
// 4. Object.prototype
console.log(buddy.name);        // "Buddy" (实例属性)
console.log(buddy.bark());      // "Buddy is barking" (Dog.prototype)
console.log(buddy.eat());       // "Buddy is eating" (Animal.prototype)
console.log(buddy.toString());  // "[object Object]" (Object.prototype)

prototype vs proto：

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

Person.prototype.greet = function() {
    return "Hello!";
};

var john = new Person("John");

// prototype：函数的属性，指向原型对象
console.log(Person.prototype); // {greet: function, constructor: Person}

// __proto__：实例的内部属性，指向构造函数的原型
console.log(john.__proto__ === Person.prototype); // true

// constructor：原型对象指向构造函数
console.log(Person.prototype.constructor === Person); // true
console.log(john.constructor === Person); // true (通过原型链查找)

原型链的详细结构：

function grandParent() {}
grandParent.prototype.grandMethod = function() {
    return "grand method";
};

function Parent() {}
Parent.prototype = Object.create(grandParent.prototype);
Parent.prototype.constructor = Parent;
Parent.prototype.parentMethod = function() {
    return "parent method";
};

function Child() {}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.childMethod = function() {
    return "child method";
};

var instance = new Child();

// 完整的原型链
console.log(instance.__proto__ === Child.prototype);                    // true
console.log(instance.__proto__.__proto__ === Parent.prototype);         // true
console.log(instance.__proto__.__proto__.__proto__ === grandParent.prototype); // true
console.log(instance.__proto__.__proto__.__proto__.__proto__ === Object.prototype); // true
console.log(instance.__proto__.__proto__.__proto__.__proto__.__proto__ === null); // true

// 方法调用
console.log(instance.childMethod());  // "child method"
console.log(instance.parentMethod()); // "parent method" 
console.log(instance.grandMethod());  // "grand method"

属性查找和遮蔽：

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

Person.prototype.name = "Default Name";
Person.prototype.greet = function() {
    return "Hello, " + this.name;
};

var john = new Person("John");

// 属性遮蔽
console.log(john.name); // "John" (实例属性遮蔽原型属性)

delete john.name;
console.log(john.name); // "Default Name" (实例属性被删除，访问原型属性)

// 方法遮蔽
john.greet = function() {
    return "Hi, " + this.name;
};

console.log(john.greet()); // "Hi, Default Name" (实例方法遮蔽原型方法)

hasOwnProperty 和 in 操作符：

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

Person.prototype.species = "Human";

var john = new Person("John");

// hasOwnProperty：检查自身属性
console.log(john.hasOwnProperty('name'));    // true (实例属性)
console.log(john.hasOwnProperty('species')); // false (原型属性)

// in 操作符：检查整个原型链
console.log('name' in john);     // true
console.log('species' in john);  // true
console.log('toString' in john); // true (Object.prototype)

// 判断属性是否仅在原型中
function hasPrototypeProperty(object, name) {
    return !object.hasOwnProperty(name) && (name in object);
}

console.log(hasPrototypeProperty(john, 'species')); // true

原型的动态性：

function Person() {}

var john = new Person();
var jane = new Person();

// 动态添加原型方法
Person.prototype.greet = function() {
    return "Hello!";
};

// 已存在的实例也能访问新添加的方法
console.log(john.greet()); // "Hello!"
console.log(jane.greet()); // "Hello!"

// 但重写整个原型对象不会影响已创建的实例
Person.prototype = {
    constructor: Person,
    newMethod: function() {
        return "New method";
    }
};

var bob = new Person();
console.log(bob.newMethod());   // "New method"
// console.log(john.newMethod()); // TypeError: john.newMethod is not a function

原型继承的实现模式：

1. 原型链继承：

function Animal(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}

Animal.prototype.getName = function() {
    return this.name;
};

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

Dog.prototype = new Animal(); // 继承

var dog1 = new Dog("Buddy", 3);
var dog2 = new Dog("Charlie", 5);

// 问题：共享引用类型属性
dog1.colors.push('green');
console.log(dog2.colors); // ['red', 'blue', 'green'] (被意外修改)

2. 借用构造函数：

function Animal(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}

function Dog(name, age) {
    Animal.call(this, name); // 借用构造函数
    this.age = age;
}

var dog1 = new Dog("Buddy", 3);
var dog2 = new Dog("Charlie", 5);

dog1.colors.push('green');
console.log(dog1.colors); // ['red', 'blue', 'green']
console.log(dog2.colors); // ['red', 'blue'] (不受影响)

// 问题：无法继承原型方法

3. 组合继承（推荐）：

function Animal(name) {
    this.name = name;
    this.colors = ['red', 'blue'];
}

Animal.prototype.getName = function() {
    return this.name;
};

function Dog(name, age) {
    Animal.call(this, name); // 继承实例属性
    this.age = age;
}

Dog.prototype = Object.create(Animal.prototype); // 继承原型方法
Dog.prototype.constructor = Dog;

Dog.prototype.getAge = function() {
    return this.age;
};

var dog1 = new Dog("Buddy", 3);
console.log(dog1.getName()); // "Buddy" (继承的方法)
console.log(dog1.getAge());  // 3 (自己的方法)

原型链的实际应用：

1. 扩展内置对象（谨慎使用）：

// 为 Array 添加自定义方法
Array.prototype.last = function() {
    return this[this.length - 1];
};

var arr = [1, 2, 3, 4, 5];
console.log(arr.last()); // 5

// 为 String 添加方法
String.prototype.reverse = function() {
    return this.split('').reverse().join('');
};

console.log("hello".reverse()); // "olleh"

// 注意：修改内置原型可能导致冲突

2. 插件和库的实现：

// 创建一个简单的 DOM 操作库
function $(selector) {
    return new $.fn.init(selector);
}

$.fn = $.prototype = {
    constructor: $,
    
    init: function(selector) {
        this.elements = document.querySelectorAll(selector);
        this.length = this.elements.length;
        return this;
    },
    
    addClass: function(className) {
        for (var i = 0; i < this.length; i++) {
            this.elements[i].classList.add(className);
        }
        return this; // 链式调用
    },
    
    removeClass: function(className) {
        for (var i = 0; i < this.length; i++) {
            this.elements[i].classList.remove(className);
        }
        return this;
    }
};

$.fn.init.prototype = $.fn;

// 使用
$('.my-class').addClass('active').removeClass('inactive');

3. 类型检测和原型验证：

// 检测对象的原型链
function isInstanceOf(obj, constructor) {
    var prototype = constructor.prototype;
    var objProto = obj.__proto__;
    
    while (objProto !== null) {
        if (objProto === prototype) {
            return true;
        }
        objProto = objProto.__proto__;
    }
    
    return false;
}

function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);

var dog = new Dog();
console.log(isInstanceOf(dog, Dog));    // true
console.log(isInstanceOf(dog, Animal)); // true
console.log(isInstanceOf(dog, Object)); // true

原型链性能优化：

// 避免深层原型链
function createShallowInheritance(parent, child) {
    // 直接复制父原型的方法到子原型
    for (var key in parent.prototype) {
        if (parent.prototype.hasOwnProperty(key)) {
            child.prototype[key] = parent.prototype[key];
        }
    }
}

// 缓存原型链查找结果
function createMethodCache(obj) {
    var cache = {};
    
    return function(methodName) {
        if (!(methodName in cache)) {
            cache[methodName] = obj[methodName];
        }
        return cache[methodName];
    };
}

调试原型链：

// 原型链调试工具
function getPrototypeChain(obj) {
    var chain = [];
    var current = obj;
    
    while (current !== null) {
        chain.push({
            object: current,
            constructor: current.constructor ? current.constructor.name : 'Unknown',
            isPrototype: current !== obj
        });
        current = Object.getPrototypeOf(current);
    }
    
    return chain;
}

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

var john = new Person("John");
console.log(getPrototypeChain(john));
// 输出完整的原型链信息

最佳实践：

• 使用 Object.create() 建立干净的原型链
• 始终设置 constructor 属性 确保对象类型的正确性
• 避免修改内置原型 除非在 polyfill 中使用
• 理解属性查找机制 合理使用原型和实例属性
• 使用组合继承模式 在需要继承时的推荐方案

How to implement a bind function?

考察点：综合运用 this、apply、闭包和高阶函数等知识，代码实现能力。

答案：

bind 函数创建一个新函数，当调用时将其 this 关键字设置为提供的值，并在调用新函数时提供给定的参数序列。实现 bind 需要理解闭包、apply/call 和函数构造等概念。

基础版本的 bind 实现：

// 简单版本的 bind 实现
Function.prototype.myBind = function(context) {
    var self = this; // 保存原函数
    
    return function() {
        return self.apply(context, arguments);
    };
};

// 测试基础版本
function greet() {
    return "Hello, " + this.name;
}

var person = {name: "John"};
var boundGreet = greet.myBind(person);

console.log(boundGreet()); // "Hello, John"

支持预设参数的 bind 实现：

Function.prototype.myBind = function(context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1); // 提取预设参数
    
    return function() {
        // 合并预设参数和调用时参数
        var bindArgs = args.concat(Array.prototype.slice.call(arguments));
        return self.apply(context, bindArgs);
    };
};

// 测试参数预设
function add(a, b, c) {
    return a + b + c;
}

var addFive = add.myBind(null, 5); // 预设第一个参数为 5
console.log(addFive(2, 3)); // 10 (5 + 2 + 3)

var addFiveTen = add.myBind(null, 5, 10); // 预设前两个参数
console.log(addFiveTen(3)); // 18 (5 + 10 + 3)

完整版本：支持构造函数调用：

Function.prototype.myBind = function(context) {
    if (typeof this !== "function") {
        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }
    
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    
    // 创建一个中间函数
    var fNOP = function() {};
    
    var fBound = function() {
        var bindArgs = args.concat(Array.prototype.slice.call(arguments));
        
        // 检查是否通过 new 调用
        // 如果是通过 new 调用，this 应该指向新创建的实例
        return self.apply(
            this instanceof fNOP ? this : context,
            bindArgs
        );
    };
    
    // 维护原型链
    if (this.prototype) {
        fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();
    
    return fBound;
};

// 测试构造函数调用
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

var BoundPerson = Person.myBind(null, "John");
var john = new BoundPerson(25);

console.log(john.name);     // "John"
console.log(john.age);      // 25
console.log(john.greet());  // "Hello, I'm John"
console.log(john instanceof Person); // true

优化版本：使用 ES5 的 Object.create：

Function.prototype.myBind = function(context) {
    if (typeof this !== "function") {
        throw new TypeError("Function.prototype.bind called on incompatible " + typeof this);
    }
    
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    
    var bound = function() {
        var bindArgs = args.concat(Array.prototype.slice.call(arguments));
        
        if (this instanceof bound) {
            // 通过 new 调用
            var result = self.apply(this, bindArgs);
            return (typeof result === "object" && result !== null) ? result : this;
        } else {
            // 普通调用
            return self.apply(context, bindArgs);
        }
    };
    
    // 维护原型链
    if (self.prototype) {
        bound.prototype = Object.create(self.prototype);
    }
    
    return bound;
};

处理边界情况的完整实现：

Function.prototype.myBind = function(context) {
    // 类型检查
    if (typeof this !== "function") {
        throw new TypeError(
            "Function.prototype.bind - what is trying to be bound is not callable"
        );
    }
    
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    
    var bound = function() {
        var bindArgs = args.concat(Array.prototype.slice.call(arguments));
        
        if (this instanceof bound) {
            // 构造函数调用
            var result = self.apply(this, bindArgs);
            
            // 如果构造函数返回对象，使用该对象；否则使用 this
            if (Object(result) === result) {
                return result;
            }
            return this;
        }
        
        // 普通函数调用
        return self.apply(context, bindArgs);
    };
    
    // 原型链处理
    var Empty = function() {};
    if (self.prototype) {
        Empty.prototype = self.prototype;
        bound.prototype = new Empty();
        Empty.prototype = null;
    }
    
    return bound;
};

// 测试边界情况
function TestConstructor(value) {
    this.value = value;
    
    // 构造函数可能返回对象
    if (value === "return object") {
        return {special: true};
    }
}

var BoundTest = TestConstructor.myBind(null, "test");
var instance1 = new BoundTest();
console.log(instance1.value); // "test"

var BoundTestObject = TestConstructor.myBind(null, "return object");
var instance2 = new BoundTestObject();
console.log(instance2.special); // true

bind 的实际应用场景：

1. 事件处理中保持 this：

function Button(element) {
    this.element = element;
    this.clickCount = 0;
    
    // 错误方式：this 会丢失
    // this.element.addEventListener('click', this.handleClick);
    
    // 正确方式：使用 bind 保持 this
    this.element.addEventListener('click', this.handleClick.bind(this));
}

Button.prototype.handleClick = function(event) {
    this.clickCount++;
    console.log('按钮被点击了 ' + this.clickCount + ' 次');
};

var button = new Button(document.getElementById('myButton'));

2. 部分应用（Partial Application）：

function multiply(a, b, c) {
    return a * b * c;
}

// 创建特定的函数
var double = multiply.bind(null, 2);      // 固定第一个参数为 2
var doubleByFive = multiply.bind(null, 2, 5); // 固定前两个参数

console.log(double(3, 4));    // 24 (2 * 3 * 4)
console.log(doubleByFive(6)); // 60 (2 * 5 * 6)

// 实用工具函数
var log = console.log.bind(console);
var warn = console.warn.bind(console);
var error = console.error.bind(console);

log("This is a log message");

3. 函数式编程中的应用：

var users = [
    {name: "John", age: 25},
    {name: "Jane", age: 30},
    {name: "Bob", age: 35}
];

// 使用 bind 创建专用的映射函数
var getName = function(user) {
    return user.name;
};

var getAge = function(user) {
    return user.age;
};

var names = users.map(getName);
var ages = users.map(getAge);

// 使用 bind 创建比较函数
function compare(property, a, b) {
    if (a[property] < b[property]) return -1;
    if (a[property] > b[property]) return 1;
    return 0;
}

var sortByAge = compare.bind(null, 'age');
var sortByName = compare.bind(null, 'name');

users.sort(sortByAge);
console.log(users); // 按年龄排序

4. 模块模式中的方法绑定：

var Calculator = (function() {
    var result = 0;
    
    function add(value) {
        result += value;
        return this;
    }
    
    function multiply(value) {
        result *= value;
        return this;
    }
    
    function getResult() {
        return result;
    }
    
    function reset() {
        result = 0;
        return this;
    }
    
    // 返回绑定了正确 this 的方法
    return {
        add: add.bind(Calculator),
        multiply: multiply.bind(Calculator),
        getResult: getResult,
        reset: reset.bind(Calculator)
    };
})();

Calculator.add(5).multiply(2);
console.log(Calculator.getResult()); // 10

性能优化版本：

// 针对不需要构造函数功能的简化版本
Function.prototype.simpleBind = function(context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    
    return function() {
        return self.apply(
            context,
            args.concat(Array.prototype.slice.call(arguments))
        );
    };
};

// 带缓存的 bind 实现
Function.prototype.cachedBind = function(context) {
    var self = this;
    var cache = self._bindCache = self._bindCache || {};
    var key = context || 'null';
    
    if (cache[key]) {
        return cache[key];
    }
    
    var bound = function() {
        return self.apply(context, arguments);
    };
    
    cache[key] = bound;
    return bound;
};

测试用例：

// 全面的测试用例
function runBindTests() {
    console.log("开始 bind 实现测试...");
    
    // 测试1：基本绑定
    function basicFunction() {
        return this.value;
    }
    
    var obj = {value: 42};
    var bound = basicFunction.myBind(obj);
    console.assert(bound() === 42, "基本绑定测试失败");
    
    // 测试2：参数预设
    function sum(a, b, c) {
        return a + b + c;
    }
    
    var addTen = sum.myBind(null, 10);
    console.assert(addTen(5, 2) === 17, "参数预设测试失败");
    
    // 测试3：构造函数调用
    function Constructor(name) {
        this.name = name;
    }
    
    Constructor.prototype.getName = function() {
        return this.name;
    };
    
    var BoundConstructor = Constructor.myBind(null, "Test");
    var instance = new BoundConstructor();
    console.assert(instance.name === "Test", "构造函数测试失败");
    console.assert(instance instanceof Constructor, "原型链测试失败");
    
    console.log("bind 实现测试完成！");
}

runBindTests();

最佳实践：

• 理解原生 bind 行为：确保实现与原生行为一致
• 处理边界情况：null/undefined 上下文、构造函数返回值等
• 维护原型链：确保通过 new 调用时原型链正确
• 性能考虑：根据使用场景选择合适的实现版本
• 错误处理：提供清晰的错误信息

What are the differences between call, apply, and bind?

考察点：函数调用方式和上下文绑定的理解。

答案：

call、apply 和 bind 都是用来改变函数执行时 this 指向的方法，但它们在调用方式、参数传递和返回结果上有重要区别。

基本语法对比：

function greet(greeting, punctuation) {
    return greeting + ", " + this.name + punctuation;
}

var person = {name: "John"};

// call：立即执行，参数逐个传递
var result1 = greet.call(person, "Hello", "!");
console.log(result1); // "Hello, John!"

// apply：立即执行，参数以数组形式传递
var result2 = greet.apply(person, ["Hi", "."]);
console.log(result2); // "Hi, John."

// bind：返回新函数，不立即执行
var boundGreet = greet.bind(person, "Hey");
var result3 = boundGreet("!!!");
console.log(result3); // "Hey, John!!!"

主要区别总结：