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

时间: 2015-12-06

JavaScript基础知识之数据类型

数据类型 JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型--Object,Object本质上是由一组无序的名值对组成的. typeof操作符 介于JavaScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型--typeof就是负责提供者方面信息的操作符.对一个值使用typeof操作符可能返回下列某个字符串: ● "undefined"--如果这个值未定义: ●

每天一篇javascript学习小结(基础知识)

1.字符转换 var s1 = "01"; var s2 = "1.1"; var s3 = "z";//字母'z'无法转换为数字,所以或返回NaN var b = false; var f = 1.1; var o = { valueOf: function() { return -1; } }; s1 = -s1; //value becomes numeric -1 s2 = -s2; //value becomes numeric -1.

javascript真的不难-回顾一下基础知识

前言 说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条件语句块,循环语句块等等,而对于每种语言在写法上到是显得各有不同,如JS里在定义变量时,你要用var去声局部变量的声明,而对于弱类型的语言JS来说,你也可以不加var,但不加它会认为这个变量为全局变量,这是要注意的. 变量 在程序运行过程中,其值可以发生改变的(呵呵,10多年前书上的定义) var people ; //声明一个名为pe

JavaScript 基础知识 被自己遗忘的

5%10=5 x="5"+"5"; x="5"+5 ; document.write(x);(結果都為﹕55) undefined是未初始化的变量的值﹐沒有引用值﹐屬于未定義 var anyway; anyway屬于已定義 有默認空值 一元運算符﹕delete(刪除對開發者定義的對象和方法的引用﹐不能刪除原始的ECMAScript方法) void 运算符对任何值返回 undefined 没有返回值的函数真正返回的都是 undefined. 一元加

javascript之正则表达式基础知识小结

元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用"\"来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠"\" 简单匹配 1.直接量 /javascript/ 匹配带有"javascript"的字符串 比如"javascript is an object-oriented scripting language" 2.[ ] /[abc]/ 匹配

extjs 学习笔记(一) 一些基础知识

我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例

javascript DOM 操作基础知识小结

DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 //涂聚文 geovindu@163.com var nr = 1; function addItem() { var list = document.getElementById("list"); var newNode = document.createElement("li"); var newLink = document.createElement("a"); newLink.

JavaScript 语言基础知识点总结(思维导图)

JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaScript 数据类型 JavaScript 变量 Window 对象 DOM 基本操作    由于上面的图片比较大,建议大家下载到本地查看

学习JavaScript编程语言的8张思维导图分享

学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆.阅读.思维的规律,协助人们在科学与艺术.逻辑与想象之间平衡发展,从而开启人类大脑的无限潜能.思维导图因此具有

详解java接口基础知识附思维导图

接口: 官方的含义是---->java接口是一系列方法的声明,是一些方法特征的集合 疑问: 那为什么不用抽象类呢?把他们共有的方法集合起来放在一个抽象类里面,同样可以调用哇,但是反过来想一想如果这些方法,不是同一个类,就比如飞这个方法,飞机有飞这个方法,蚊子有飞这个方法,如果让他连同时继承拥有飞这个抽象类里面,是不符合单一职责原则的,所以我们可以提供一个飞的接口,飞机,蚊子来实现这个接口,那么飞机和蚊子就拥有飞的能力啦,这是我对接口的理解 因为最近在学习java 面向对象中的接口,就画了思维导图

仅9张思维导图帮你轻松学习Javascript 就这么简单

学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将分享收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小tips: 思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来,把主题关键词与图像.颜色等建立记忆链接,思维导图充分运用左右脑的机能,利用记忆.阅读.思维的规律,协助人们在科学与艺术.逻辑与想象之间平衡发展,从而开启人类大脑的无

一文总结学习Python的14张思维导图

本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典,集合),条件&循环,文件对象,错误&异常,函数,模块,面向对象编程: 接着,结合这些思维导图主要参考的资料,分享一下我的学习体验,一方面可供初学者参考,另一方面,也便于大家结合思维导图深入学习.理解.思考: 最后,提供几篇文章链接,方便希望从 Python 2.x 迁移到 3.x 的朋友理解

Python学习思维导图(必看篇)

无意间碰到的一个大神整理的Python学习思维导图,感觉对初学者理清学习思路大有裨益,非常感谢他的分享. 14 张思维导图 基础知识 数据类型 序列 字符串 列表 & 元组 字典 & 集合 条件 & 循环 文件对象 错误 & 异常 函数 模块 面向对象编程 以上这篇Python学习思维导图(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

学习Java的9张思维导图

网上搜集了java的学习思维导图,分享给大家. 01.Java程序设计(基础) 02.Java程序设计(专题) 03.客户端网页编程 04.Java Web表示层技术 05.Oracle 06.Hibernate 07.MyBATIS 08.Spring 具体忘记从哪里找到的这么好的资料,谢谢原作者. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. 您可能感兴趣的文章: Spring思维导图助你轻松学习Spring

一张Web前端的思维导图分享

一张关于Web前端方面的思维导图,留下来备用:

Spring思维导图助你轻松学习Spring

写在前面 很多人在微信公众号中给我留言说想看spring的思维导图,正好也打算写.与其他框架相比,spring项目拥有更多的模块,我们常用的ioc,mvc,aop等,这些是spring的主要板块.一篇文章也不可能全部都讲,所以,我打算先把spring简介说一下,后续再写ioc,mvc和aop. 关于Spring Spring是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架.

C语言基础知识点解析(extern,static,typedef,const)

一.extern的使用方法 下面是<C语言程序设计>中的关于extern的解释: 在一个源程序的所有源文件中,一个外部变量只能在某个文件中定义一次,而其他文件可以通过extern声明来访问它(定义外部变量的源文件中也可以包含对该外部变量的extern声明).外部变量的定义中必须指定数组的长度,但extern声明不一定指定数组的长度. 外部变量的初始化只能出现在其定义中. 假设函数push与pop定义在一个文件中,而变量val与sp在另一个文件中定义本那个被初始化(通常不太可能这样组织程序),则