javascript基础知识讲解

本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~。

学习目的

本文针对javascript基础薄弱的同学,可以加深对javascript的理解。

本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑

讲解内容如下:

1. 连等

2. i++

3. 包装对象

4. 引用类型

5. && 与 ||

讲解部分

1. 连等

小试牛刀

连等是常见的表达式,但是并不是所有情况都适合连等,连等只适用于字面量并不适用于引用类型

// 字面量连等得到想要的结果
var a,b;
a = b = 2;
a // 2
b // 2
// 引用类型连等不可预测
var arr1, arr2;
arr1 = arr2 = []
arr1[0] = 10
arr2[0] // 10
//引用类型连等使得两个引用指向一个对象,操作其中一个,两个值都变

以上代码是常见的连等,有时候我们需要两个变量同赋值为一个值,我们就这样来操作,但是,如果是引用类型可不能连等赋值哦。

此外,连等赋值会有一个很大的漏洞,就是会将变量泄露到全局中去,上面代码我们没有将其泄露,但看下面代码:

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a // 报错
b // 10
// 我们并不没有定义全局变量b

可以看到,我们执行了fn函数后,全局作用域中出现了b变量,这是为什么?看 var a = b = num这句话,这句话可以分成两句来看

var a
a = b = num
//只声明了a

我们其实只声明了a变量,连等的b并没有声明,由此可以知道,b被挂在了全局的window对象上,造成了变量泄露到了全局。

初出茅庐

上面只是简单的例子,接下来我们看一个复杂点的例子

var a = {x: 1}
var b = a
a.x = a = {y: 1}
a.x // undefined
b.x // {y: 1}

这个例子是在一个测试题中看到的,乍一看,好像不明觉厉,但是一点都不难理解。

1. a 和 b是引用了类型,同指向了一个对象 {x: 1}

2. a.x 引用了原对象的x属性, a 则为一个引用变量

3. a  = {y: 1}  只是将a这个引用变量的指针指向了另一个对象{y: 1}

4. a.x = a,前者还是代表着原来的对象的x属性,也就是b引用的对象的x属性

5. 赋值完毕。

可能你还没有理解,不要急,下面我们将解剖javascript引擎让你懂的明明白白

庖丁解牛

引擎的工作原理: 引擎在解析javascript表达式时,会进行LHS查询, RHS查询(详见《你不知道的javascript》),我将它们理解为LHS(赋值),RHS(查找)。

下面,就上面例子,我们来演示一下引擎的工作流程

var a = {x: 1}
// 引擎:我将要对a变量LHS(赋值),内容是{x: 1}
// 作用域: 刚声明了a变量,给你。
var b = a
// 引擎: 我将要对a变量RHS(查找)
// 作用域: 你刚刚给它LHS了,给你吧
// 引擎: 我将要对b变量LHS(赋值),内容为a变量指向的对象
// 作用域:刚声明了b变量,给你。
a.x = a = {y: 1}
// 引擎:我将要对a进行LHS(赋值),内容是另一个对象{y:1}
// 作用域:可以,给你,但好像还有其他命令,先不要赋值。
// 引擎: 是的,下一步我还需要对a.x 进行LHS(赋值),内容是将要改变的a变量
// 作用域: 可以,a变量指向的对象有x属性,不过马上a就改变了,不过没关系,b变量也指向那个对象,赋值完后,你可以用b变量引用旧对象。
// 引擎:了解了,我先把a变量赋值为一个新的对象,然后把原来的a变量指向的对象的x属性赋值为 新a。
a.x // undefined
// 引擎: 我需要拿到a变量指向的对象的x属性
// 作用域: 你刚刚改变了a的指向,现在的a指向的对象已经没有x属性了
b.x // {y: 1}
// 引擎: 我需要拿到b变量指向的对象的x属性
// 作用域: 你是想拿到你旧对象的x属性吧,给你,不过已经被你在之前改变了值,现在b.x的值就是a指向的新对象的值。

以上是我的理解,没有权威认证。想详细了解执行过程,请参考《你不知道的javascript》,如果本节有误,请指出。

2. ++操作符

大家最很常用 ++ 操作符,其实也没什么很大奇特之处,但是对于新手入门的你是否真正了解他。

var a = 1;
var b = a++
a // 2
b // 1
var c = 1;
var d = ++ c;
c // 2
d // 2

前++和后++,一个是返回表达式自增后一个是返回表达式自增前的值。我们可以把两个进行分解,看一下过程。

b = a++
// 等价于 ...
b = a
a = a + 1
//.........................
b = ++ a
// 等价于 ...
a = a + 1
b = a

只是一个运算顺序问题,这个可能好理解,但是也有一个坑,如下。

前几天一个人问: 1++ 等于几?答: 2

估计很多人第一反应就是2,但是这大错特错!那为什么不等于2呢,其实 1++是报错了,并不是合法的表达式,原因如下:

1 ++
// 等价于
1 = 1 + 1
// 引擎对 1 进行LHS(赋值),作用域发现他是非法变量,所以会报错 左值无效。

3. 包装对象

我们在用字符串获取长度、使用方法截取等行为时,你有没有想过: 字面值只是个值,为什么他会有方法属性,不是应该对象才有的吗?的确是对象才有的,但是在执行表达式时,产生了包装对象。也许你看过了此知识点,可以跳过。

var str = 'hello'
str.length // 5
str.aaa = 5
str.aaa // undefined

我们定义一个str字符串,获取长度为5,但是我们自己加一个属性aaa缺获取不到,这需要用包装对象的声明周期来解答:包装对象的声明周期只存在于一个表达式内

var str = 'hello'
str.length
// 等价于
new String(str).length
str.aaa = 5
//等价于
new String(str).aaa = 5
str.aaa
// 等价于
new String(str).aaa

也就是说,每一次用到str属性时,都是先包装成String对象,操作完后,对象释放,可见,以上两次str.aaa是不同的对象,所以第二次获取aaa属性当然没有了。不了解可以百度一下js包装对象,有详细的解答。

4. 引用类型

大部分语言都有引用类型,其实就是对象变量。c语言中,我们将引用类型理解为指针,这个指针是动态指向一块内存,通过代码的变化,指针的指向会随之改变。js也一样。

在我们书写代码中,一定要记住引用类型变量和字面值变量的 区别,他们分别有不同的用处。

var global = new Object()
function setColor (obj) {
 obj.color = 'blue'
 obj = new Object()
 obj.color = 'red'
}
setColor(global)
global.color // blue

这是《javascript高级程序设计》里面的一个例子,我们传递一个对象global到setColor函数里,在内部进行了如上操作,我们打印出global.color是blue,为什么不是red?这里就是引用类型的结果。

1. global变量是引用类型,他指向一个对象,

2. 传递到setColor函数中,obj就引用了global指向的对象(下面称为globalObj)

3. 给globalObj赋值一个color属性为blue字符串,这时global.color是blue了

4. 将obj指向另一个新对象localObj,使得obj与global断开连接。

5. 将localObj.color赋值为‘red'

可以看出,我们并没有对global对象的color进行'red'赋值,'red'赋值给了另一个对象的color属性。

结论:引用类型传递是将两个变量指向同一个对象,而字面量的传递仅仅是值的赋值传递。我们可以将引用类型传递到函数进行改变,不可以在函数内改变传递进来的字面值。

5. && 与 ||

两者的基本运用相信大家都了解,大部分用来if判断,如:

var a = 2;
var b = false
if (a && b) {

 alert('best')
}
if (a || b) {
 alret('good')  // 运行
}

他们的用法不局限于判断 左右两边的 && 和 || 关系,还可以用来提供代码的质量

var obj = {}
if (obj.info.user === 'xu') { // terrible
 // ..
}
if (obj.info && obj.info.user === 'xu' ) { // good
 // ...
}

如果仅仅判断obj.info.user 会报错造成程序终止,但是下面那样判断就大使得代码健壮,不会那么容易崩溃。

重点: && 和 || 并不会返回true和false,他会返回终止此表达式的那个变量值。

true && 6 // 6
NaN && false // NaN
'0' || 6 // '0'
false || true // true
false || 0 && 1 // 0
false || 1 && 0 // 0

&&和||, &&优先级大于||。

&&操作符,如果左边为假,返回左边值,否则,始终返回右边值

||操作符,如果左边为真,返回左边值, 否则,始终返回右边值。

结尾

javascript基础本章简单的介绍在这里,内容并不全面,还请多多见谅。如有错误,请指出。。。。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

  • JS基础随笔(菜鸟必看篇)

    在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • javaScript基础详解

    首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 JavaScript的六大作用: 1直接在script输出 document.write("<h1>This is a heading</h1>");//document.write表输出,括号中h1标签同样有效 2对事件作出反应 <button type="button"

  • JavaScript基础知识点归纳(推荐)

    定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

  • Javascript基础学习笔记(菜鸟必看篇)

    什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

  • Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

  • JavaScript基础重点(必看)

    接触JavaScript这门语言也就很长的时间了,但从来没有系统的去了解这么语言.趁现在刚刚毕业以及某些原因无心工作的情况下去系统的了解一下这么语言,也想通过这么语言养成写博客的习惯,因为我认为这是一件对程序员来说很神圣又很光荣的事情. 1.1背景 相信很多初学者都遗忘或混淆的就是JavaScript的官方命名:ECMAScript.2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 1.2语法 常规语法省略 重点强调: 1.原始值和对象:原始值包括布

  • js 基础篇必看(点击事件轮播图的简单实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

随机推荐