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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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
PHP学习 变量使用总结
2011/03/24 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript 写类方式之四
2009/07/05 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python实现的一个p2p文件传输实例
2014/06/04 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python中字典增加和删除使用方法
2020/09/30 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
人力资源专员自我评价怎么写
2013/09/19 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
学年末自我鉴定
2014/01/21 职场文书
银行开业庆典方案
2014/02/06 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js