JS의 세 가지 산인 범위 및 폐쇄, 프로토타입 및 프로토타입 체인, 비동기 및 단일 스레드에 대한 자세한 설명
js는 프런트엔드의 백본 역할을 합니다. 그렇다면 자바스크립트의 3대 산이 무엇인지 아시나요?
1️⃣ 범위 및 폐쇄
범위
作用域
指代码当前上下文,控制着变量和函数的可见性和生命周期。最大的作用是隔离变量,不同作用域下同名变量不会冲突。
作用域链
指如果在当前作用域中没有查到值,就会向上级作用域查询,直到全局作用域,这样一个查找过程所形成的链条就被称之为作用域链。【推荐学习:javascript视频教程】
作用域可以堆叠成层次结构,子作用域可以访问父作用域,反之则不行。
作用域具体可细分为四种:全局作用域
、模块作用域
、函数作用域
、块级作用域
全局作用域: 代码在程序的任何地方都能被访问,例如 window 对象。但全局变量会污染全局命名空间,容易引起命名冲突。
模块作用域: 早期 js 语法中没有模块的定义,因为最初的脚本小而简单。后来随着脚本越来越复杂,就出现了模块化方案(AMD、CommonJS、UMD、ES6模块等)。通常一个模块就是一个文件或者一段脚本,而这个模块拥有自己独立的作用域。
函数作用域: 顾名思义由函数创建的作用域。闭包就是在该作用域下产生,后面我们会单独介绍。
块级作用域: 由于 js 变量提升存在变量覆盖、变量污染等设计缺陷,所以 ES6 引入了块级作用域关键字来解决这些问题。典型的案例就是 let 的 for 循环和 var 的 for 循环。
// var demo for(var i=0; i<10; i++) { console.log(i); } console.log(i); // 10 // let demo for(let i=0; i<10; i++) { console.log(i); } console.log(i); //ReferenceError:i is not defined
了解完作用域再来谈谈 闭包
: 函数A里包含了函数B,而函数B使用了函数A的变量,那么函数B被称为闭包或者闭包就是能够读取函数A内部变量的函数。
可以看出闭包是函数作用域下的产物,闭包会随着外层函数的执行而被同时创建,它是一个函数以及其捆绑的周边环境状态的引用的组合。换而言之,闭包是内层函数对外层函数变量的不释放。
闭包的特征:
- 函数中存在函数;
- 内部函数可以访问外层函数的作用域;
- 参数和变量不会被 GC,始终驻留在内存中;
- 有内存地方才有闭包。
所以使用闭包会消耗内存、不正当使用会造成内存溢出的问题,在退出函数之前,需要将不使用的局部变量全部删除。如果不是某些特定需求,在函数中创建函数是不明智的,闭包在处理速度和内存消耗方面对脚本性能具有负面影响。
以下整理了闭包的应用场景:
// demo1 输出 3 3 3 for(var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } // demo2 输出 0 1 2 for(let i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 1000); } // demo3 输出 0 1 2 for(let i = 0; i < 3; i++) { (function(i){ setTimeout(function() { console.log(i); }, 1000); })(i) }
/* 模拟私有方法 */ // 模拟对象的get与set方法 var Counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } } })(); console.log(Counter.value()); /* logs 0 */ Counter.increment(); Counter.increment(); console.log(Counter.value()); /* logs 2 */ Counter.decrement(); console.log(Counter.value()); /* logs 1 */
/* setTimeout中使用 */ // setTimeout(fn, number): fn 是不能带参数的。使用闭包绑定一个上下文可以在闭包中获取这个上下文的数据。 function func(param){ return function(){ alert(param) }} const f1 = func(1);setTimeout(f1,1000);
/* 生产者/消费者模型 */ // 不使用闭包 // 生产者 function producer(){ const data = new(...) return data } // 消费者 function consumer(data){ // do consume... } const data = producer() // 使用闭包 function process(){ var data = new (...) return function consumer(){ // do consume data ... } } const processer = process() processer()
/* 实现继承 */ // 以下两种方式都可以实现继承,但是闭包方式每次构造器都会被调用且重新赋值一次所以,所以实现继承原型优于闭包 // 闭包 function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); this.getName = function() { return this.name; }; this.getMessage = function() { return this.message; }; } // 原型 function MyObject(name, message) { this.name = name.toString(); this.message = message.toString(); } MyObject.prototype.getName = function() { return this.name; }; MyObject.prototype.getMessage = function() { return this.message; };
对于闭包的概念好像懂了但又好像缺少了啥?意犹未尽。我也曾也闭包中迷失,但是看完闭包的生命周期让我重新找回自己。
学完就来一波牛刀小试
function test(a, b){ console.log(b); return { test: function(c) { return test(c,a); } } } var a = test(100);a.test(101);a.test(102); var b = test(200).test(201).test(202); var c = test(300).test(301);c.test(302); // undefined 100 100 // undefined 200 201 // undefined 300 301
2️⃣ 原型和原型链
有对象的地方就有 原型
,每个对象都会在其内部初始化一个属性,就是prototype(原型),原型中存储共享的属性和方法。当我们访问一个对象的属性时,js引擎会先看当前对象中是否有这个属性,如果没有的就会查找他的prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。这么一个寻找的过程就形成了 原型链
는 변수와 함수의 가시성과 수명 주기를 제어하는 코드의 현재 컨텍스트를 나타냅니다. 가장 큰 기능은 변수를 격리하여 다른 범위에서 동일한 이름을 가진 변수가 충돌하지 않도록 하는 것입니다.
Scope Chain
전역 범위
🎜, 🎜모듈 범위
🎜, 🎜함수 범위
🎜 , 🎜 블록 수준 범위
🎜🎜🎜🎜전역 범위: 🎜 코드는 창 개체 등 프로그램 내 어디에서나 액세스할 수 있습니다. 그러나 전역 변수는 전역 네임스페이스를 오염시키고 쉽게 이름 충돌을 일으킬 수 있습니다. 🎜🎜🎜모듈 범위: 🎜 원래 스크립트가 작고 단순했기 때문에 초기 js 구문에는 모듈 정의가 없었습니다. 나중에 스크립트가 점점 더 복잡해지면서 모듈식 솔루션(AMD, CommonJS, UMD, ES6 모듈 등)이 등장했습니다. 일반적으로 모듈은 파일이나 스크립트이며 이 모듈은 자체적인 독립적인 범위를 갖습니다. 🎜🎜🎜함수 범위:🎜 이름에서 알 수 있듯이 함수에 의해 생성된 범위입니다. 클로저는 이 범위에서 생성되며 나중에 별도로 소개하겠습니다. 🎜🎜🎜블록 수준 범위: 🎜 js 변수 승격에는 변수 적용 범위 및 변수 오염과 같은 설계 결함이 있으므로 ES6에서는 이러한 문제를 해결하기 위해 블록 수준 범위 키워드를 도입했습니다. 일반적인 경우는 let의 for 루프와 var의 for 루프입니다. 🎜const arr = [1, 2, 3]; arr.__proto__ === Array.prototype; // true arr.__proto__.__proto__ === Object.prototype; // true Array.__proto__ === Function.prototype; // true🎜스코프를 이해한 후 이야기해 봅시다🎜
클로저
:🎜 함수 A는 함수 B를 포함하고, 함수 B는 함수 A의 변수를 사용하며, 함수 B를 클로저 또는 클로저 A 패키지라고 합니다. 함수 A의 내부 변수를 읽을 수 있는 함수입니다. 🎜🎜클로저는 함수 범위의 산물임을 알 수 있습니다. 클로저는 외부 함수가 실행됨과 동시에 함수와 주변 환경 상태에 대한 번들 참조가 결합된 것입니다. 즉, 🎜 클로저는 외부 함수 변수를 해제 🎜 하지 않는 내부 함수입니다. 🎜🎜🎜클로저의 특징: 🎜🎜- 함수 내에 함수가 있습니다.
- 내부 함수는 외부 함수의 범위에 액세스할 수 있습니다.
- 매개변수와 변수는 액세스할 수 없습니다. GC가 되며 항상 메모리에 상주합니다.
- 메모리가 있는 경우에만 클로저가 있습니다.

🎜2️⃣ 프로토타입과 프로토타입 체인🎜🎜🎜객체가 있는 곳에는🎜프로토타입이 있다 code >🎜, 각 객체는 그 내부의 속성, 즉 프로토타입을 초기화하고 프로토타입은 공유 속성과 메서드를 저장합니다. 객체의 속성에 접근할 때, js 엔진은 먼저 현재 객체에 이 속성이 있는지 확인하고, 그렇지 않다면 해당 프로토타입 객체에 이 속성이 있는지 확인하며, Object 내장 객체가 검색될 때까지 계속됩니다. 이러한 검색 과정이 🎜<code>프로토타입 체인
🎜이라는 개념을 형성했습니다. 🎜🎜프로토타입을 이해하는 데 가장 중요한 것은 __proto__, 프로토타입 및 생성자 간의 관계를 명확히 하는 것입니다. 먼저 몇 가지 개념을 살펴보겠습니다. 🎜
-
__proto__属性在所有对象中都存在,指向其构造函数的prototype对象;prototype对象只存在(构造)函数中,用于存储共享属性和方法;constructor属性只存在于(构造)函数的prototype中,指向(构造)函数本身。
- 一个对象或者构造函数中的隐式原型__proto__的属性值指向其构造函数的显式原型 prototype 属性值,关系表示为:
instance.__proto__ === instance.constructor.prototype
- 除了 Object,所有对象或构造函数的 prototype 均继承自 Object.prototype,原型链的顶层指向 null:
Object.prototype.__proto__ === null
- Object.prototype 中也有 constructor:
Object.prototype.constructor === Object
- 构造函数创建的对象(Object、Function、Array、普通对象等)都是 Function 的实例,它们的 __proto__ 均指向 Function.prototype。
instance.__proto__ === instance.constructor.prototype
Object.prototype.__proto__ === null
Object.prototype.constructor === Object
看起来是不是有点乱??别慌!!一张图帮你整理它们之间的关系
相同的配方再来一刀
const arr = [1, 2, 3]; arr.__proto__ === Array.prototype; // true arr.__proto__.__proto__ === Object.prototype; // true Array.__proto__ === Function.prototype; // true
3️⃣ 异步和单线程
JavaScript 是 单线程
语言,意味着只有单独的一个调用栈,同一时间只能处理一个任务或一段代码。队列、堆、栈、事件循环构成了 js 的并发模型,事件循环
是 JavaScript 的执行机制。
为什么js是一门单线程语言呢?最初设计JS是用来在浏览器验证表单以及操控DOM元素,为了避免同一时间对同一个DOM元素进行操作从而导致不可预知的问题,JavaScript从一诞生就是单线程。
既然是单线程也就意味着不存在异步,只能自上而下执行,如果代码阻塞只能一直等下去,这样导致很差的用户体验,所以事件循环的出现让 js 拥有异步的能力。
更多编程相关知识,请访问:编程教学!!
위 내용은 JS의 세 가지 산인 범위 및 폐쇄, 프로토타입 및 프로토타입 체인, 비동기 및 단일 스레드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

WebStorm Mac 버전
유용한 JavaScript 개발 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版
시각적 웹 개발 도구

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
