JavaScript知识点整理


Posted in Javascript onDecember 09, 2015

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

首先,还是用比较官方的文字描述来解释下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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
js实现跨域访问的三种方法
Dec 09 #Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
js获取鼠标位置实例详解
Dec 09 #Javascript
JavaScript常用基础知识强化学习
Dec 09 #Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
You might like
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
jquery简易手风琴插件的封装
2020/10/13 jQuery
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
cf收人广告词大全
2014/03/14 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL