js进阶（常见问题分析）_js1.问题分析过程-优快云博客

本文围绕JavaScript展开，介绍了类型转换、事件委托、闭包等核心知识，分析了“==”和“===”、null和undefined的区别，还提及深拷贝和浅拷贝及实现方式。此外，给出了简单的性能优化方法，最后阐述了线程和进程的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.js类型转换方式

显式转换：parseInt,parseFloat,number

隐式转换：==，===，+，-，*，/,%

2,事件委托

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行

3，闭包

闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收

优点：(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收) (2)避免全局变量的污染 (3)私有成员的存在 (4)安全性提高

缺点：容易导致内存泄露

4， ”==”和“===”的不同

"=="会自动转换类型,再判断是否相等
"==="不会自动类型转换，直接去比较

5,null和undefined的区别

null表示没有对象，即该处不应该有值

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

6，js数据类型

常见数据类型：string, boolean, number，undefined，null

复合数据类型：function, object

7，简单的性能优化方法

（1）压缩css、js文件
（2）合并js、css文件，减少http请求
（3）外部js、css文件放在最底下
（4）减少dom操作，尽可能用变量替代不必要的dom操作

8，深拷贝和浅拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，如果原地址发生改变，那么被拷贝出来的值也会发生改变

深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，即使原地址发生改变，被拷贝出来的值也不会发生改变

9，深拷贝实现的几种方式

（1）json方法实现

//_tmp和result是相互独立的，没有任何联系，有各自的存储空间。
let deepClone = function (obj) {
    let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式
    let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象
    return result;
};

let obj1 = {
    weiqiujaun: {
        age: 20,
        class: 1502
    },
    liuxiaotian: {
        age: 21,
        class: 1501
    }
};

let test = deepClone(obj1);
console.log(test);

（2）用for...in方式实现

//_tmp和result是相互独立的，没有任何联系，有各自的存储空间。
let deepClone = function (obj) {
    let _tmp = JSON.stringify(obj);//将对象转换为json字符串形式
    let result = JSON.parse(_tmp);//将转换而来的字符串转换为原生js对象
    return result;
};

let obj1 = {
    weiqiujaun: {
        age: 20,
        class: 1502
    },
    liuxiaotian: {
        age: 21,
        class: 1501
    }
};

let test = deepClone(obj1);
console.log(test);

（3）利用数组的Array.protype.forEach

let deepClone = function (obj) {
    let copy = Object.create(Object.getPrototypeOf(obj));
    let propNames = Object.getOwnPropertyNames(obj);
    propNames.forEach(function (items) {
        let item = Object.getOwnPropertyDescriptor(obj, items);
        Object.defineProperty(copy, items, item);

    });
    return copy;
};

let testObj = {
    name: "weiqiujuan",
    sex: "girl",
    age: 22,
    favorite: "play",
    family: {brother: "wei", mother: "haha", father: "heihei"}
}
let testRes2 = deepClone(testObj);
console.log(testRes2);

(4) 使用递归的方式实现

/使用递归的方式实现数组、对象的深拷贝
function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

（5）lodash函数实现

lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝

10，变量提升

js代码执行过程分为两个阶段，第一阶段词法分析，第二阶段代码执行。

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);
// undefined  undefined 200  100

11，渐进增强和优雅降级

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

12，this指向

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。

1.如果是call，apply,with，指定的this是谁，就是谁。
2.普通的函数调用，函数被谁调用，this就是谁。

13，原型继承的原理

function getProperty(obj,prop) {

if (obj.hasOwnProperty(prop)) {

return obj[prop];

} else if (obj.__proto__!==null) {

return getProperty(obj.__proto__,prop);

} else {

return undefined;

}

`14，同步和异步的区别`

同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。
同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。