首页 > 编程语言 >JavaScript 需要清楚的10件事

JavaScript 需要清楚的10件事

时间:2023-07-24 17:07:06浏览次数:33  
标签:10 name JavaScript alert 清楚 var 变量 函数

文/谢传贵



   在学习JavaScript的过程中,最需要搞清楚的10件事是什么?关于这个问题有人在 Quora上给出了的答案。其中提到了一些很有代表性的知识点(坑),但描述比较杂乱。下面我将在他的基础上进行重新编排和解释。希望对你学习 JavaScript有些帮助(为避免文章跑题,以下内容先不考虑ES5的 strict mode):



1. 使用关键字var声明变量



   要使用一个变量,应该先声明它。在JavaScript中,声明变量非常简单,因为你不用关心它的类型。



1	function setLocal () {
2        var name = 'Tom';
3        alert('the name is ' + name);
4	}
5	setLocal(); // "the name is Tom"


   如果不用var呢?让我们来看一个例子:


01	var sex = 'female';
02	function setGlobal () {
03        var age = '86';
04        name = 'John';
05        sex = 'male'; //我们不知函数外也有一个变量sex
06        alert(name + ' is ' + age + ' years old.');
07	}
08	setGlobal(); // "John is 86 years old."
09	alert(name); // "John"
10	alert(sex);  // "male"
11	alert(age);  // ReferenceError: age is not defined

   在 这个例子中,从setGlobal函数外部我们能够访问(可读写)变量name而不能访问变量age。事实上,函数内部使用var声明的变量是局部变量, 只有函数内部能够访问。但由于没有使用var声明变量name,从函数外部也能访问到它 ,这很不安全。同时,事例代码中还试图声明变量sex,仍然由于没有使用var,却无意将外部变量sex的值覆盖了,即污染了其他代码,这更是难以接受 的。



   特别地,在使用一个未声明的变量时,程序将会报错;使用一个已声明而未赋值的变量时,或者使用一个并不存在的对象属性时,返回的值是undefined:



1	var name;
2	var obj = {};
3	alert(name);      // undefined
4	alert(obj.prop);  // undefined
5	alert(some);      // ReferenceError: some is not defined


   总结:在声明一个变量时省去var,这个变量将变成一个全局变量(global variable),你程序的数据直接暴露给了全局,同时也可能覆盖函数外已有的同名变量,对他人代码构成了风险。所以,请一定记得使用关键字var。



2.单引号和双引号没有区别



   一些传统的后端语言是明显区分单引号和双引号作用的,例如Java里表示字符需要使用单引号,而表示字符串需要使用双引号:


1	Char ch = 'a';
2	String str = "Cat";


   然 而JavaScript没有char这样的数据类型,要表示文本数据类型,只能使用字符串(string)。创建字符串直接量最简单的方法是使用一对单引 号或双引号括起来你想表示的字符序列。选择使用单引号还是双引号从语法上没有区别,如果选择单引号,则字符串内部的单引号需要转义,如果选择双引号,则字 符串内部的双引号同理也需要转义。要表示单个字符,须使用长度为1的字符串。例如:


1	var name = "She said, \"Who is the president?\"";
2	var desc = 'What\'s that?';
3	var desc = 'e';


   基于上面提到的转义关系,我个人比较喜欢使用单引号,这可以减少许多转义的麻烦,尤其是当你的代码中包含HTML代码时。试想如果下面的字符串选用双引号,那将增加很多反斜杠,而且还容易错:



1	$('div').append('
2	error info
3	');


   同理,如果HTML标签里嵌入JavaScript代码,也一样能减少反斜杠(不过,应尽量少在HTML标签上写JavaScript代码):



3.除了null和undefined,一切都像是对象(object)



   JavaScript 的变量类型可以分为两类:原始类型(primitive types)和对象类型(object types)。原始类型有5种,分别是数字、字符串、布尔型,以及null和undefined两个特殊值。除了原始类型,其他的一切都是对象类型。除了 null和undefined,其他一切都“像是对象”。为什么说像是对象,因为接下来你会发现原始类型变量也能调用方法或属性,甚至连函数也拥有方法。


1	function f () {
2        var n = 10;
3        alert(n.toString()); // "10"
4	}
5	f.call(); // f是一个函数,依然能调用方法

   


   我 们看到,n是一个原始类型的值,而f是一个函数,他们都可以调用方法,就像一个对象一样。事实上,在JavaScript中,除了null和 undefined,一切都可以调用方法或属性。这里有一个隐藏的逻辑,那就是当原始类型的变量试图调用方法或属性时,它会被动态地转成其对应的包装对 象。让我们来检测一下:



1	function f () {
2        var n = 123;
3        Number.prototype.toString = function() {
4               return typeof this;
5        }
6        alert(typeof n); //"number"
7        alert(n.toString()); //"object"
8	}
9	f();



4.undefined, null, 0, NaN, ''在作为布尔值使用时都代表false


   


   当处于布尔环境时,undefined, null, 0, NaN, ''会被作为false使用,其他的一切作为true使用。



1	if (o) {
2   //当o的值不为undefined, null, 0, NaN, '', false时,进入该处 
3	}


   要注意,这里的字符串是一个长度为1的空字符串。



5.使用全等号===



   JavaScript中有两个判断相等的运算符:==(一般相等)和===(全等)。一般相等运算符由2个等号组成,使用它进行相等判断时会对运算符两边的值进行类型转换,以使两边类型相同后再进行相等比较。例如:


1	0 == ''  // true
2	0 == '0' // true
3	1 == true  // true
4	false == '0' // true
5	null == undefined // true
6	' \t\r\n ' == 0  // true

   正如上面的例子,由于会自动进行类型转换,一些我们直觉不会相等的值也相等了,这些结果大部分时候不是我们想要的。如果你想了解转换规则,推荐你看《ECMAScript. Equality operators.》,不过相当枯燥难记。



   全 等运算符由3个连续的等号组成,使用它进行相等判断时不会对运算符两边的值进行类型转换,要满足相等,它不仅要求类型相同,还要求值相同,所以使用全等运 算符时上面的例子一个也不会相等。这里有一个特例,那就是NaN,它是唯一一个不与任何值相等的值,甚至包括它本身,要判断一个值是否等于NaN,你需要 使用全局函数isNaN:


1	NaN === NaN  // false
2	isNaN(NaN)  // true


   所以,除非你很确定两个待比较值的类型是一样的,或者你很熟悉类型转换关系,否则我还是劝你使用全等号吧。



6.没有块作用域(block scope)



   JavaScript 中没有块作用域或类作用域的概念,只有函数作用域,即函数内部定义的变量对于整个函数体以及函数内嵌套的函数都是可见的,而对于函数体外部是不可见的,与 花括号没有什么关系。例如下面的例子中变量i是定义在if条件的花括号代码块中的,我们依然能从花括号外访问:



1	function f () {
2        var c = 1;
3        if (true) {
4               var i = 2;
5               alert(c);   // 1
6        }
7        alert(i);  // 2
8



   正是因为JavaScript只有函数作用域,所以我们可以通过函数来模拟实现私有属性。



7.变量声明会被提升到当前作用域的顶部



   什么意思呢?还是先来看一个例子(参考犀牛书第6版):

1	var scope = 'global';
2	function f () {
3        alert(scope);  // "undefined", not "global"
4        var scope = 'local';
5        alert(scope);  //  "local"
6        var name = 'country';
7	}
8	f();


   结 合前面的知识,你也许认为函数第一行会打印"global",因为var声明和赋值发生在其后面,而函数外已经有scope变量了。听起来很和逻辑。事实 却是打印了"undefined"。这里涉及一个JavaScript很有趣的现象—提升(hoisting),函数内部声明的所有变量对整个函数作用域 都是可见的,就好像在函数执行时,所有的变量声明会被提升到第一行一样。上面的代码等效于:


1	var scope = 'global';
2	function f () {
3        var scope, name;
4        alert(scope);  // "undefined"
5        scope = 'local';
6        alert(scope);  //  "local"
7        name = 'country';
 

8	}



   所以,在定义一个函数时,请将所有变量声明放在函数的第一行,因为这样的代码比较真实地反映了变量声明的提升现象。同时,即使你已理解了提升现象,但阅读代码的人不一定理解,为了避免困惑,从代码的可阅读性上仍然推荐将所有的变量声明置于函数作用域的顶部。



8.函数的参数可以被省略



   这个很好理解。函数声明时可以指定形参的个数,但调用时并不强求传参的个数。在调用时,如果对应形参的位置没有给值,则其值为undefined。


1	function hello (name, age) {
2        alert('name is : ' + name + ', age is ' + age);
3	}
4  
5	hello('Anon', 42);  // name is : Anon, age is 42
6	hello("Baptiste"); // name is : Baptiste, age is undefined
7	hello("Bulat", 24, 42); // name is : Bulat, age is 24


9.JavaScript是面向对象的语言,使用原型继承机制



   JavaScript是一门面向对象的语言,使用基于原型的继承机制(原型编程),不存在类(class)的概念。使用JavaScript实现继承非常简单。



01	if (typeof Object.create != 'function') { //为低版本JavaScript提供create方法
02        Object.create = function (o) {
03               function F() {}
04               F.prototype = o;
05               return new F();
06        };
07	}
08	var a = { };
09	a.foo = 'hello';
10	a.do = function () { alert('do something.'); };
11	var b = Object.create(a);  //对象b继承自对象a
12	b.bar = 'crazy';
13	b.bar  // "crazy"  b创建了自己的属性bar
14	b.foo  // "hello"  b从a继承了属性foo
15	b.do();  // "do something." b从a继承了方法do
16	b.foo = 'world';
17	b.foo  // "world"
18	a.foo  // "hello" // b创建了自己的属性foo, 这不会修改a的属性foo
19	a.do = function () { alert('i am a letter.'); };
20	b.do();  // "i am a letter." a的方法do被更新,b动态响应了更新。


   从 上面这个简短的示例可以看到,对象a直接从对象b继承了属性和方法,并且之后若是a有修改,b也动态更新继承。这个过程没有class什么事,一切都是对 象,按照Douglas Crockford的说法:“还有什么能比这更面向对象的呢?”(What could be more object oriented than that?)



10.JavaScript不仅限于浏览器



   随着Web的发展,JavaScript在浏览器端可谓春风得意,但JavaScript绝不仅限于浏览器,它还可以用在其他地方,比如最近风头正劲的Node.js就是运行于服务器端的。



【嘉年华推荐】


   


   也许你是一位后端工程师,日常使用的语言具有很完善的预检查能力,任何以上提到的语法错误都不会被IDE和编译器放过,但由于JavaScript通常运行在客户端,加上一些历史的原因,它并没有严格的预检查能力,所以良好的编程习惯是很重要的。



   要学好一门语言当然不是掌握10点或20条就能做到的,这需要我们持续的学习和实践。若你有更好的建议,欢迎回复补充分享。




--


微信名称:阿里技术嘉年华



简介:传播原创高质量的技术内容

————————————————


标签:10,name,JavaScript,alert,清楚,var,变量,函数
From: https://blog.51cto.com/u_8895844/6836743

相关文章

  • javascript基本数据类型与值类型引用类型说明
    DEMO:http://sources.ikeepstudying.com/jsdata/ 摘要:本文主要讲了javascript中的基本数据类型,以及值类型和引用类型的区别与使用一、基本数据类型在javascript中申明变量使用的关键字都是var,这点与其他的编程语言不尽相同,但是javascript亦含有五种基本的数据类型(也可以说是简......
  • LeetCode 热题 100 之 3. 无重复字符的最长子串
    题目给定一个字符串s,请你找出其中不含有重复字符的 最长子串 的长度。示例 1:输入:s="abcabcbb"输出:3解释:因为无重复字符的最长子串是"abc",所以其长度为3。示例2:输入:s="bbbbb"输出:1解释:因为无重复字符的最长子串是"b",所以其长度为1。示例3:......
  • JavaScript基础-数组(进阶)
    扩展运算符letarr1=[1,2],arr2=[3,4];letarr3=arr1.concat(arr2);letarr4=[...arr1,...arr2]console.log(arr4);用concat 连接然后...展开letarr1=[1,2];letarr2=[...arr1]console.log(arr1,arr2);把arr1的值传给arr2,输出[1,2][1,2]......
  • Vue项目启动 报错error:0308010C:digital envelope routines::unsupported
    出现这个错误是因为node.jsV17版本中最近发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.解决方法package.json增加配置"scripts":{"serve":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-serviceserve......
  • CodeForces 1810G The Maximum Prefix
    洛谷传送门CF传送门感觉是比较educational的题。拿到题目应该有一个大致思路,就是考虑最大前缀和的求法,再把它扔到状态里面。最大前缀和有两种求法:从前往后求,需要维护当前前缀和\(s\),当前最大前缀和\(mx\),需要记录两个变量,无法承受。从后往前求,只需记录当前最大前缀和......
  • STM32F103C8在Keil5中烧录后串口工具无法接收到数据(已解决)
    烧录后串口无法接收到数据(默认硬件连线是正确的,只考虑软件配置问题)在通过Keil5烧录程序并成功后,发现串口没有接收到数据烧录成功未报错串口工具无法接收到数据点击魔法棒,进入Debug-Settings,查看Pack-DebugDescription中的Enable是否勾上,发现√上后拔掉下载器并重新插......
  • ORA-10635:无效的段或表空间类型
    错误信息【汉】ORA-10635:无效的段或表空间类型【英】ORA-10635:Invalidsegmentortablespacetype例在正常运行的Oracle数据库中,执行收缩段(表)报错。版本Oracle【11.2.0.3.0】、【11.2.0.1.0】、【11.2.0.4.0】原因无法收缩段,因为Oracle在收缩前检测到,段(表)不在自动段空间管理......
  • 爬了1000张清纯妹子私房照,我流鼻血了...
    闲扯几句大家好,我是你们的老朋友青戈,之前分享了一篇Java爬虫的入门实战教程,收获了不少赞,看来大家伙对爬虫的热情度还是蛮高的哈。既然大家都这么想学爬虫,那今天就安排点刺激的。那你要非问我有多刺激,那我只能告诉,我看完…流鼻血了…......
  • javaScript 小知识
    ??运算符只有前面的值是undefined才会执行letstatus=undefined;lettext=status??"暂无"console.log(text)//暂无?.运算符这在有时候处理对象时非常有用,看下面案例,person.name返回undefined然后在调用toString这时肯定会报错,这时使用?.运算符就不会产生错误,?.......
  • 面对对象还是基于对象傻傻分不清楚,JS这个非主流太搞了
    与其它的语言相比,JavaScript中的“对象”总是显得不那么合群。一些新人在学习JavaScript面向对象时,往往也会有疑惑:为什么JavaScript(直到ES6)有对象的概念,但是却没有像其他的语言那样,有类的概念呢;为什么在JavaScript对象里可以自由添加属性,而其他的语言却不能呢?甚至,在一些争论......