Compilation of JavaScript knowledge points_javascript skills-JS Tutorial-php.cn

JavaScript is a literal scripting language. It is a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called the JavaScript engine, which is part of the browser and is widely used in client-side scripting languages. It was first used on HTML (an application under Standard Universal Markup Language) web pages to add dynamic functions to HTML web pages. .

First of all, let’s use a more official text description to explain JavaScript:

JavaScript is a literal scripting language. It is a dynamically typed, weakly typed, prototype-based language with built-in support for types.
Its interpreter is called the JavaScript engine, which is part of the browser and is widely used in client-side scripting languages. The earliest is
Used on HTML (an application under Standard Universal Markup Language) web pages to add dynamic functions to HTML web pages.

JavaScript has the following characteristics:

· Scripting language. JavaScript is an interpreted scripting language. Languages such as C and C++ are compiled first and then executed, while JavaScript is interpreted line by line during the running of the program.
· Object based. JavaScript is an object-based scripting language that can not only create objects but also use existing objects.
· Simple. The JavaScript language uses weakly typed variable types and does not impose strict requirements on the data types used. It is a scripting language based on Java's basic statements and controls, and its design is simple and compact.
· Dynamic. JavaScript is an event-driven scripting language that can respond to user input without going through a Web server. When visiting a web page, JavaScript can directly respond to these events when the mouse is clicked, moved up or down, or moved in the window.
· Cross-platform. JavaScript scripting language does not depend on the operating system and only requires browser support. Therefore, after writing a JavaScript script, it can be brought to any machine for use, provided that the browser on the machine supports the JavaScript scripting language. Currently, JavaScript is supported by most browsers.

JavaScript consists of the following parts:

·ECMAScript, describes the syntax and basic objects of the language.
· Document Object Model (DOM), which describes methods and interfaces for processing web content.
· Browser Object Model (BOM), which describes the methods and interfaces for interacting with the browser.

What data types are there in JavaScript?

· object object includes Function, String, Array, Object, Date, etc.
· string
· number
· boolean
· null
· undefined

The following part of the code proves the above:

String and Number are objects, string and number are different data formats...

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

What is the object prototype chain?

When we use new an object (created using the constructor) or create an object using Object.create, then the object will have a prototype and prototype chain.
For example: we create a constructor _obj, and then use _obj to create a new obj. Then the prototype chain at this time is: obj → _obj → Object.prototype → null.

Let’s illustrate it through code:

 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

Copy after login

It should be noted that the prototype chain of Object.create(null) is directly null, which means that its prototype chain is very short...

How to play with scope in JavaScript?

When we use var to declare a variable in JavaScript, we are actually adding an attribute and attribute value to the object pointed to by the scope.
There is no block-level scope in JavaScript. Variables declared in the current scope are only available within the current scope and functions within the current scope, while variables declared within a function are only available within the function (if no operation is performed ), calling this variable outside the function will report an error not defined.

Let’s run the code to understand the scope:

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

Copy after login

Scopes also have scope chains:

 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又是单线程的，所以压根没执行到这句...

Copy after login

In other words, variables declared in the current scope will still be available in its sub-scopes, which is cool, haha...

What is a closure? How to play?

The execution of the function depends on the variable scope. This scope is determined when the function is defined, not when the function is called. In order to achieve this kind of lexical scoping, the internal state of a JavaScript function object not only contains the function's logical code, but must also reference the current scope chain. Function objects can be related to each other through scope chains, and variables inside the function body can be stored in the scope of the function. This feature is actually "closure".
Let’s continue looking at the code:

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，这也实现了函数里的私有变量，只将需要暴露的两个方法给暴露在外。

Copy after login

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

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();

Copy after login

arguments

在Javascript函数体内，arguments像数组一样（并不是真的数组），有length属性，可以代表传给函数的参数的个数。

简单来说，arguments函数执行时所传的实际参数。
比如：arguments[0]表示传入第一个参数。

用代码验证：

 function argumentsTest(){
  console.log(arguments[0]&#63;arguments[0]:"Hello World",arguments[1]&#63;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].

Copy after login

好了，关于javascript知识点先给大家整理这么些，全当温习下知识点，本文写的不好，还望各位朋友多多指教。