当前位置:首页 > JS > JavaScript的几个实用小知识点

JavaScript的几个实用小知识点

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是

在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

javascript

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是不同的数据格式…

1
2
3
4
5
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。

让我们通过代码来说明吧:

1
2
3
4
5
6
7
8
9
10
11
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。

让我们跑一跑代码来认识下作用域:

1
2
3
4
5
6
var firstNum = 1;
  ~function(){
      var secondNum = 2;
      console.log("在里面打印:"+firstNum ,secondNum); // 在里面打印:1 2
  }();
  console.log("在外面打印:"+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…)

作用域也有作用域链:

1
2
3
4
5
6
7
8
9
10
11
12
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函数对象的内部状态不仅包含函数的逻辑代码,还必须引用当前的作用域链。函数对象可以通过作用域链相互关联起

来,函数体内部的变量都可以保存在函数的作用域内,这种特性其实就是“闭包”。

javascript

继续来看代码吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 → 指向其本身

验证代码:

1
2
3
4
5
6
7
8
9
10
11
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]表示传入第一个参数。

用代码验证:

1
2
3
4
5
 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].

暂时写就这些了,找到了这些知识点的总结,想了想再温习一次~,希望能够帮助到大家。

  • << nodejs之express的使用
  • HTML+JS使用正则表达式让input文本框只... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/javascript-function/

    相关文章 近期热评 最新文章

    • HTML+CSS+JS 实现图标旋转效果
      本文讲解了使用HTML+CSS+JS 实现图标旋转效果。
    • js怎样获取和设置元素的属性
      本文讲解了js获取和设置元素的属性的方法,有需要的朋友可以看看
    • Node.Js 不一般的JavaScript
      互联网的火热使得JavaScript风光无限,且服务端的JavaScript也并不是什么新技术了,相关的框架也有不少,只是node.js的成功让他爆发式的出现在我们的视线中,让很多前端...
    • 前端程序员必须知道的优化小知识
      前端开发人员的一些小知识,Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术。除了后台需要在性能上做优化外,其实前端的页面...
    • HTML5与CSS3的完美搭配
      TML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。
    • 前端程序员必须知道的chrome开发者技巧
      在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。