Hello! 欢迎来到小浪资源网!



js知识点总结


对于那些认为自己了解 javascript 但常遇到问题的人,本文重点阐述了以下几点:JS 语言的特点:动态类型、单线程、原型继承与基于类的继承,以及闭包this 关键字。原型链:通过 proto 属性实现继承,沿链向上查找属性;关注原型污染和修改原型对象的影响。闭包:允许内部函数访问外部变量,但需注意内存管理。异步编程:async/await 简化异步代码,但底层仍基于 promise 实现。this 关键字:指向取决于调用方式,箭头函数和调用上下文有助于理解。

js知识点总结

JS这玩意儿,你真的懂吗?

这篇文章不是为了教你JS入门,你要是连console.log都没见过,还是先去看看MDN吧。 这篇文章是给那些觉得自己“懂”JS,却经常在一些奇奇怪怪的角落里栽跟头的朋友准备的。我会从一些容易被忽略,或者理解不透彻的点入手,帮你把JS这块地基夯实。读完之后,你或许会发现,自己对JS的理解,还差得远呢。

首先,我们得承认,JS这门语言,它…怎么说呢,有点“奇葩”。它既是动态类型的,又是单线程的;它既有原型继承,又有基于类的继承(es6+);它既有闭包这种强大的武器,又有this关键字这种让人抓狂的玩意儿。 这些特性,构成了JS的魅力,但也带来了不少坑。

原型和原型链:别被它绕晕了

很多JS开发者对原型和原型链的概念都理解得不够清晰。 记住,原型链的核心思想是通过__proto__属性(虽然不被推荐直接访问)来实现对象的继承。 一个对象的__proto__指向它的原型对象,原型对象又可以有自己的原型对象,这样就形成了一个链条。 当访问一个对象的属性时,如果该对象自身没有该属性,JS引擎就会沿着原型链向上查找,直到找到该属性或者到达原型链的顶端(NULL)。

function Person(name) {   this.name = name; }  Person.prototype.greet = function() {   console.log("Hello, my name is " + this.name); };  let person = new Person("Alice"); person.greet(); // Hello, my name is Alice  console.log(person.__proto__ === Person.prototype); // true

这看起来简单,但实际应用中,原型链的复杂性很容易导致一些难以调试的bug。 比如,原型污染,或者不经意间修改了原型对象,导致所有实例都受到影响。 所以,写代码的时候,一定要谨慎对待原型链,尽量避免直接修改原型对象。

闭包:一把双刃剑

闭包是JS中一个非常强大的特性,它允许内部函数访问其外部函数的变量,即使外部函数已经执行完毕。 这使得我们可以创建一些非常优雅的代码,比如模块化编程、柯里化等等。

function outerFunction() {   let outerVar = "Hello";    function innerFunction() {     console.log(outerVar);   }    return innerFunction; }  let myClosure = outerFunction(); myClosure(); // Hello

但是,闭包也带来了一些性能问题。 如果闭包中引用了大量的变量,那么这些变量就会一直保存在内存中,即使它们不再被需要,这可能会导致内存泄漏。 所以,使用闭包时,要时刻注意内存管理,避免不必要的内存占用

异步编程:promise, Async/Await

JS是单线程的,这意味着它一次只能执行一个任务。 但是,很多操作都是异步的,比如网络请求、定时器等等。 为了处理异步操作,JS提供了各种机制,比如回调函数、Promise、Async/Await。 其中,Async/Await 是最优雅,也最容易理解的方式。

async function fetchData() {   try {     const response = await fetch('https://api.example.com/data');     const data = await response.json();     console.log(data);   } catch (error) {     console.error("Error fetching data:", error);   } }  fetchData();

Async/Await 使得异步代码看起来像同步代码一样,极大地提高了代码的可读性和可维护性。 但是,要记住,Async/Await 只是语法糖,底层仍然是基于Promise实现的。

this关键字:让人头疼的家伙

JS中的this关键字,它的指向取决于函数的调用方式。 这使得this的指向变得非常难以预测,也是JS中一个让人头疼的问题。 学习箭头函数,以及理解函数的调用上下文,能够帮助你更好地理解和使用this关键字。 记住,在严格模式下,this在非对象方法中指向undefined,这与非严格模式下的全局对象有很大区别,务必注意。

这篇文章只是对JS的一些核心知识点进行了简单的总结,还有很多细节和技巧需要你去探索和学习。 记住,成为JS高手,不是一蹴而就的,需要不断的学习和实践,更需要不断地反思和总结。 多读源码,多写代码,多思考,才能真正掌握JS这门充满魅力,又充满挑战的语言。

相关阅读