JavaScript常用基础知识强化学习


Posted in Javascript onDecember 09, 2015

首先,还是用比较官方的文字描述来解释下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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Highcharts入门之简介
Aug 02 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
AngularJS实现元素显示和隐藏的几个案例
Dec 09 #Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 #Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 #Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
javascript如何写热点图
Dec 08 #Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 #Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
加强版phplib的DB类
2008/03/31 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
jquery设置控件位置的方法
2013/08/21 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Django框架模板的使用方法示例
2019/05/25 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python socket 聊天室实例代码详解
2019/11/14 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
10条PHP编程习惯
2014/05/26 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
求职信需要的五点内容
2014/02/01 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
Pygame Rect区域位置的使用(图文)
2021/11/17 Python