자바스크립트 공통기초지식 강화학습_자바스크립트 스킬

먼저 JavaScript를 설명하기 위해 좀 더 공식적인 텍스트 설명을 사용하겠습니다.

JavaScript는 기본적으로 유형을 지원하는 동적 유형, 약한 유형의 프로토타입 기반 언어입니다. 해당 인터프리터는 JavaScript 엔진이라고 하며 브라우저의 일부이며 클라이언트측 스크립팅 언어에서 널리 사용됩니다. HTML(Standard Universal Markup에 따른 애플리케이션)에서 처음 사용되었습니다. 언어). 웹 페이지에서 HTML 웹 페이지에 동적 기능을 추가하는 데 사용됩니다.
자바스크립트는 다음과 같은 특징을 가지고 있습니다.

• · 스크립팅 언어. 자바스크립트는 C, C 등의 언어를 먼저 컴파일한 뒤 실행하는 반면, 자바스크립트는 프로그램이 실행되는 동안 한 줄씩 해석된다.
• · 객체 기반. JavaScript는 객체를 생성할 수 있을 뿐만 아니라 기존 객체를 사용할 수도 있는 객체 기반 스크립팅 언어입니다.
• · 간단합니다. JavaScript 언어는 약한 유형의 변수 유형을 사용하며 사용되는 데이터 유형에 엄격한 요구사항을 적용하지 않습니다. 이는 Java의 기본 명령문 및 제어를 기반으로 하는 스크립팅 언어이며 디자인이 간단하고 컴팩트합니다.
• · 다이나믹. JavaScript는 웹 서버를 통하지 않고 사용자 입력에 응답할 수 있는 이벤트 중심 스크립팅 언어입니다. 웹 페이지를 방문할 때 JavaScript는 마우스를 클릭하거나 위 또는 아래로 이동하거나 창에서 이동할 때 이러한 이벤트에 직접 응답할 수 있습니다.
• · 크로스 플랫폼. JavaScript 스크립트 언어는 운영 체제에 의존하지 않으며 브라우저 지원만 필요합니다. 따라서 JavaScript 스크립트를 작성한 후에는 컴퓨터의 브라우저가 JavaScript 스크립트 언어를 지원하는 경우 모든 컴퓨터에서 사용할 수 있습니다. 현재 JavaScript는 대부분의 브라우저에서 지원됩니다.

JavaScript는 다음 부분으로 구성됩니다.

• ·ECMAScript는 언어의 구문과 기본 객체를 설명합니다.
• · DOM(문서 개체 모델)은 웹 콘텐츠를 처리하는 방법과 인터페이스를 설명합니다.
• · 브라우저 개체 모델(BOM)은 브라우저와 상호 작용하기 위한 방법과 인터페이스를 설명합니다.

JavaScript에는 어떤 데이터 유형이 있나요?

• · 객체 객체에는 함수, 문자열, 배열, 객체, 날짜 등이 포함됩니다.
• · 문자열
• ·숫자
• · 부울
• · null
• · 정의되지 않음

다음 코드 부분은 위 내용을 증명합니다.
문자열과 숫자는 객체이고, 문자열과 숫자는 서로 다른 데이터 형식입니다...

 var str = "abc";
 var Str = new String("abc");
 var num = 100;
 var Num = new Number(100);
 console.log(typeof str, typeof Str, typeof num, typeof Num); // string object number object

오브젝트 프로토타입 체인이란?
생성자를 사용하여 생성된 새 객체를 사용하거나 Object.create를 사용하여 객체를 생성하면 해당 객체는 프로토타입과 프로토타입 체인을 갖게 됩니다.
예를 들어 생성자 _obj를 만든 다음 _obj를 사용하여 새 obj를 만듭니다. 그러면 이때 프로토타입 체인은 obj → _obj → Object.prototype → null입니다.
코드를 통해 설명해 보겠습니다.

 function _obj(){};
 _obj.prototype.name = "野兽"; //每个函数都包含一个prototype属性，这个属性指向一个对象的引用，这个对象就是“原型对象”。
 _obj.prototype.age = 21;
 _obj.prototype.sayHello = function(){
   console.log("Hello "+this.name);
 };
 var obj = new _obj();
 console.log(obj); //_obj{} 而其的__proto__里包含了_obj里的各个属性，包括name，age，sayHello 
 console.log(obj.__proto__ == _obj.prototype); //true
 obj.sayHello(); // Hello 野兽
 console.log(Object.prototype.__proto__); // null 当我们追究到Object(也就是object的源头时)其指向的是null

Object.create(null)의 프로토타입 체인이 직접적으로 null이라는 점에 유의해야 합니다. 이는 프로토타입 체인이 매우 짧다는 것을 의미합니다...

JavaScript에서 범위를 어떻게 사용하나요?
JavaScript에서 var를 사용하여 변수를 선언하면 실제로 범위가 가리키는 객체에 속성과 속성 값을 추가하는 것입니다.
JavaScript에는 블록 수준 범위가 없습니다. 현재 범위에 선언된 변수는 현재 범위 내와 현재 범위 내의 함수에서만 사용할 수 있으며, 함수 내에 선언된 변수는 함수 내에서만 사용할 수 있습니다(작업이 수행되지 않은 경우). 함수 외부에서 이 변수를 호출하면 정의되지 않은 오류가 보고됩니다.
범위를 이해하기 위해 코드를 실행해 보겠습니다.

 var firstNum = 1;
 ~function(){
   var secondNum = 2;
   console.log("在里面打印："+firstNum ,secondNum); // 在里面打印：1 2
 }();
 console.log("在外面打印："+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…)

스코프에는 스코프 체인도 있습니다.

 var firstNum = 1;
 console.log("在最外层打印："+firstNum); // 在最外层打印：1
 ~function(){
   var secondNum = 2;
   console.log("在中间层打印："+firstNum,secondNum); // 在中间层打印：1 2
   ~function(){
     var thirdNum = 3;
     console.log("在最里层打印："+firstNum,secondNum,thirdNum); // 在最里层打印：1 2 3
   }();
   console.log("在中间层打印："+firstNum,secondNum,thirdNum); // Uncaught ReferenceError: thirdNum is not defined(…)
 }();
 console,log("在最外层打印："+firstNum,secondNum,thirdNum); // 由于上面已经报错，而浏览器执行JavaScript又是单线程的，所以压根没执行到这句...

즉, 현재 범위에 선언된 변수는 하위 범위에서도 계속 사용할 수 있다는 뜻이죠. 멋지네요. 하하...

클로저란 무엇인가요? 플레이하는 방법?
함수의 실행은 변수 범위에 따라 결정됩니다. 이 범위는 함수가 호출될 때가 아니라 함수가 정의될 ​​때 결정됩니다. 이러한 종류의 어휘 범위 지정을 달성하려면 JavaScript 함수 개체의 내부 상태에 함수의 논리 코드가 포함될 뿐만 아니라 현재 범위 체인도 참조해야 합니다. 함수 개체는 범위 체인을 통해 서로 관련될 수 있으며, 함수 본문 내부의 변수는 함수 범위에 저장될 수 있습니다. 이 기능은 실제로 "클로저"입니다.
계속해서 코드를 살펴보겠습니다.

 function counter(){
  var num = 0;
  return {
   count : function(){ return num++; },
   reset : function(){ return num = 0; }
  }
 };
 var firstNum = counter();
 var secondNum = counter();
 console.log(firstNum.count()); // 0
 console.log(secondNum.count()); // 0
 firstNum.reset();
 console.log(firstNum.count()); // 0 num已被重置，所以返回的为0
 console.log(secondNum.count()); // 1 num未被重置，所以返回的是1
 console.log(firstNum,secondNum); // 都为 Object{ count:function(),reset:function(),__proto__} 并且并不能在其中找到counter里var的n，这也实现了函数里的私有变量，只将需要暴露的两个方法给暴露在外。

闭包用的多的两个作用：读取函数内部的变量值；让这些变量值始终保存着(在内存中)。
同时需要注意的是：闭包慎用，不滥用，不乱用，由于函数内部的变量都被保存在内存中，会导致内存消耗大。

JavaScript中的this
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。
全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身
验证代码：

 console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 全局下执行console.log,所以此处指向的是Window
 ~function seeThis(){
  console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 由于我是在全局下写的这个函数，所以此处指向的还是Window
 }();
 var obj = {
  name:"野兽",
  showThis:function(){
   console.log(this); // Object {name: "野兽",showThis:function(),__proto__} 此处打印的是对象本身
  }
 };
 obj.showThis();

arguments
在Javascript函数体内，arguments像数组一样（并不是真的数组），有length属性，可以代表传给函数的参数的个数。
简单来说，arguments函数执行时所传的实际参数。
比如：arguments[0]表示传入第一个参数。
用代码验证：

 function argumentsTest(){
  console.log(arguments[0]?arguments[0]:"Hello World",arguments[1]?arguments[1]:"你好 世界")
 };
 argumentsTest(); // Hello World 你好 世界
 argumentsTest("This is firstValue => arguments[0].","This is secondValue => arguments[1]."); // This is firstValue => arguments[0]. This is secondValue => arguments[1].

暂时就为大家分享这些JavaScript常用基础知识，希望对大家进一步学习掌握javascript程序设计有所帮助。