JS学习笔记

简介: JS学习笔记

JS学习笔记

js和java的异同点

首先,js的语法和kottlin的语法有些相似。比如var,方法声明用

      function 方法名称 (参数名称...){
        //方法内部逻辑
      } 

还有变量类型声明 :

数据类型 : 变量名=值

区别:一:js的数据类型和java类似。只不过js中的数据类型number将java中的int,double,float整合了。

二:js中可以不用声明变量类型。变量不声明数据类型的话,那么他的类型取决于当前的值是什么数据类型。举例:

var num=0;
num-"lyyyyyyyyyyyyyy";
num=[];
num={};

三:js中的类型判断:

  判断基本类型,返回一个字符串
console.log(typeof '');//string
console.log(typeof []);//object
console.log(typeof {});//object
console.log(typeof 1);//number
console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof true);//boolean
console.log(typeof function(){});//function
console.log(typeof /\d/);//object
  检查某个对象属于哪个构造函数,返回true/false
function A(){};
function B(){};
let a = new A();
console.log(a instanceof A);
console.log(a instanceof B);
console.log([] instanceof Array);//true
console.log({} instanceof Object);//true
console.log(/\d/ instanceof RegExp);//true
console.log(function(){} instanceof Object);//true
console.log(function(){} instanceof Function);//true

变量声明

js的变量声明其实大体上可以分为三种:var声明、let与const声明和函数声明

函数声明

doSomething();
function doSomething() {
    console.log('doSomething');
}
var doSomething= 2;

你觉得上面会输出什么?TypeError吗?其实输出的结果是doSomething。这就引出了我们的问题了,当函数声明与其他声明一起出现的时候,是以谁为准呢?答案就是,函数声明高于一切,毕竟函数是js的第一公民。

那么,下面的例子呢?

doSomething();
function doSomething() {
    console.log('1');
}
function doSomething() {
    console.log('2');
}

当出现多个函数声明,那怎么办呢?以上代码输出结果为2。

因为有多个函数声明的时候,是由最后面的函数声明来替代前面的。

doSomething();
var doSomething= function() {
    console.log('doSomething');
}

var doSomething = function() {}这种格式我们叫做函数表达式。

它其实也是分为两部分,一部分是var doSomething,而一部分是doSomething = function() {},参照例1,我们可以知道,实际上这道题的结果应该是报了TypeError(因为doSomething声明但未赋值,因此doSomething是undefined)。

js中的变量提升和函数提升

在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能。举例:
  var data="lyyyyy";
  getData();
  function getData(){
    //第一次打印
    console.log("data值为: ", data);
    var data="yyyyyyy";
    //第二次打印
    console.log("data值为: ", data);
  }

打印的值第一个为undefined,而第二个打印的值为yyyyy.

原因:
在执行getData()方法的时候会在函数内部首先将变量的声明提升到第一步。
  然后再声明函数内部的函数(如果函数内部有函数的话)。
  之后才会按照方法内部的逻辑先后顺序执行代码。前两步只是声明!!!
看到这里应该就已经知道为什么会有上面那样的结果了。

实际的方法内部代码执行顺序应该是这样的:

  function getData(){
    //一。声明变量
    var data;
    //二。声明函数(如果函数内部有函数的话)
    //三。按照代码的顺序执行
    console.log("data值为: ", data);
    data="yyyyyyy";
    //第二次打印
    console.log("data值为: ", data);
  }

看到拆分后的代码执行顺序对结果也就不迷茫了。

为什么有变量提升

那么为什么会出现变量提升这个现象呢?

其实js和其他语言一样,都要经历编译和执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二步则是在执行阶段执行到该语句的时候才执行。

总结

1.js会将变量的声明提升到js顶部执行,因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分,并且将var a这一步提升到顶部执行。

2.变量提升的本质其实是由于js引擎在编译的时候,就将所有的变量声明了,因此在执行的时候,所有的变量都已经完成声明。

3.当有多个同名变量声明的时候,函数声明会覆盖其他的声明。如果有多个函数声明,则是由最后的一个函数声明覆盖之前所有的声明。


目录
相关文章
|
28天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
15天前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
49 0
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
37 0
|
5月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
58 0
webgl学习笔记3_javascript的HTML DOM
|
5月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
47 0
|
5月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
5月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
47 0
|
11月前
|
存储 JavaScript 前端开发
【js】函数概述学习笔记(8)
【js】函数概述学习笔记(8)
39 0
|
11月前
|
存储 JavaScript
【js】数组学习笔记(7-2)
【js】数组学习笔记(7-2)
60 0