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 相关文章推荐
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python lxml模块安装教程
2015/06/02 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
用Eclipse写python程序
2018/02/10 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python函数定义和调用过程详解
2020/02/09 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
竞聘书格式及范文
2014/03/31 职场文书
廉政承诺书范文
2015/04/28 职场文书
礼貌问候语大全
2015/11/10 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python
七个非常实用的Python工具包总结
2021/06/15 Python