JavaScript常用基础知识强化学习

186 阅读 0 评论 123 点赞

我是靠谱客的博主彩色镜子，最近开发中收集的这篇文章主要介绍JavaScript常用基础知识强化学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先，还是用比较官方的文字描述来解释下JavaScript：

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript拥有以下几个特点：

· 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
· 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
· 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
· 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
· 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

JavaScript由以下部分组成：

· ECMAScript，描述了该语言的语法和基本对象。
· 文档对象模型（DOM），描述处理网页内容的方法和接口。
· 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

JavaScript都有哪些数据类型？

· object object中又有 Function、String、Array、Object、Date等等
· string
· number
· boolean
· null
· undefined

下面部分代码来证明下以上所说：
String、Number是对象，string、number是不同的数据格式...

 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

对象原型链是个啥？
当我们用new一个对象 (使用构造函数创建) 或者用Object.create创建对象时，那么这个对象将会有原型和原型链。
比如：我们创建个构造函数_obj,然后通过_obj来new一个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中不存在块级作用域，在当前作用域内声明的变量也只有在当前作用域及当前作用域内的函数内可用，而在函数内声明的变量只适用于该函数内(如果不做操作)，在函数外部调用该变量将会报错not defined。
让我们跑一跑代码来认识下作用域：

 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程序设计有所帮助。