JavaScript基础知识点归纳(推荐)
定义在函数外的变量一定是全局变量;定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量。
var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(global); document.writeln(local);
2、两种类型的Cookie
i)持久性cookie,会被存储到客户端的硬盘上。
ii)回话cookie:不会被存储到客户端的硬盘上,而是放在浏览器进程所处的内存当中,当浏览器关闭时则该回话cookie就销毁了。
3、在JavaScript中,函数(function)就是对象
4、在JavaScript中,没有方法(函数)重载的概念
5、Function对象
在JavaScript中有一个Function对象,所有自定义的函数都是Function对象类型的。Function对象接受的所有参数都是字符串类型的,其中最后一个参数就是要执行的函数体,而前面的参数则是函数真正需要接受的参数。
6、隐含的对象arguments
在JavaScript中,每个函数都有一个隐含的对象arguments,表示给函数实际传递的参数。arguments.length就表示实际传递的参数的个数。
7、函数名.length
每一个函数对象都有一个length属性,表示该函数期望接受的参数个数。它与函数的arguments不同。arguments.length表示函数实际接受的参数个数。
8、JavaScript中有五种原始数据类型
Undefined、Null、Boolean、Number以及String。(注意:在JavaScript中,没有char数据类型)
Undefined数据类型的值只有一个:undefined;
Null数据类型的值只有一个:null;
Boolean数据类型的值有两个:true和false;
9、typeof运算符
typeof是一元运算符,后跟变量的名称,用于获取变量的数据类型,其返回值有5个:undefined、boolean、number、string以及object。
10、在JavaScript中,如果函数没有声明返回值,那么会返回undefined11、null与undefined的关系
undefined实际上是从null派生出来的。例如:
null与undefined的关系
JavaScript
alert(undefined == null); //浏览器返回true
11、强制类型转换
在JavaScript中有3种强制类型转换:Boolean(value),Number(value),String(value)。
12、Object对象
在JavaScript中,所有对象都是从Object对象继承过来的。
Object对象
JavaScript
var object = new Object(); for(var v in object){ alert(v); }
上面的代码中,浏览器并没有打印出什么,并不能说明Object对象不带有任何属性。下面代码测试Object对象中的属性是否可以枚举,如果返回false,则说明Object对象中的属性是不能枚举的。
Object对象中的属性是不能枚举的
JavaScript
alert(object.propertyIsEnumerable("prototype"));
浏览器弹出false对话框,则说明Object对象中的属性是不能枚举的。
接下来我们再看看window对象中的属性是否可以枚举的
window对象中的属性是可以枚举的
JavaScript
for (var v in window) { console.log(v); }
在Chrome浏览器中我们会看到浏览器调试控制台中打印出一大堆属性,说明window对象中的属性是可以枚举的。
13、在JavaScript中,可以动态添加对象的属性,也可以动态删除对象的属性
动态添加/删除对象的属性
JavaScript
var object = new Object(); alert(object.username);//undefined object.username = "zhangsan"; alert(object.username);//zhangsan object["password"] = "123"; alert(object.password);//123 delete object.username;//此时,username属性已经被删除 alert(object.username);
14、JavaScript中定义对象最常见的方式
定义对象最常见的方式
JavaScript
var object = { username:"zhangsan", password:12345 }; alert(object.username); alert(object.password);
15、数组
数组定义
JavaScript
//方法一 var array = new Array(); array.push(1); array.push(2); array.push(3); alert(array.length); //方法二(推荐) var array = [1,25,4]; array.sort(); alert(array);
调用数组的sort()方法,浏览器打印1,25,4,这并不是我们期望的结果。
对于JavaScript数组的sort方法来说,它会先将待排序的内容转换为字符串(调用toString()方法),按照字符串的先后顺序进行排序。
下列方式可以得到我们期望的结果(按数组大小进行排序):
数组排序
JavaScript
function compare(num1,num2) { var temp1 = parseInt(num1); var temp2 = parseInt(num2); if (temp1 < temp2) { return -1; } else if (temp1 == temp2) { return 0; } else { return 1; } } var array = [1,25,3]; array.sort(compare); alert(array);
我们再用匿名函数的方式实现:
匿名函数排序
JavaScript
var array = [1,25,3]; array.sort(function(num1,num2){ var temp1 = parseInt(num1); var temp2 = parseInt(num2); if (temp1 < temp2) { return -1; } else if(temp1 == temp2) { return 0; } else { return 1; } }); alert(array);
16、JavaScript中定义对象的5种方式(JavaScript中没有类的概念,只有对象)i)基于已有对象扩充其属性和方法
基于已有对象扩充其属性和方法
JavaScript
var object = new Object(); //添加name属性 object.name = "zhangsan"; //添加sayName方法 object.sayName = function(name) { this.name = name; alert(this.name); }; object.sayName("kyle");//调用sayName方法,name属性被修改为kyle,浏览器将打印kyle
最简单的一种方式,使用起来并不方便,适合于临时需要一个对象。
ii)工厂方式创建对象
不带参数的工厂方法:
JavaScript
//工厂方法 function createObject() { var object = new Object();//创建一个对象 object.name = "zhangsan";//为该对象添加一个name属性 object.password = "123";//为该对象添加一个password属性 object.get = function() {//为该对象添加一个get方法 alert(this.name+","+this.password); }; return object;//返回该对象 } var object1 = createObject();//调用createObject工厂方法创建对象object1 var object2 = createObject();//调用createObject工厂方法创建对象object2 object1.get();//调用对象get方法 object2.get();//调用对象get方法
带参数的工厂方法:
JavaScript
function createObject(name,password) { var object = new Object(); object.name = name; object.password = password; object.get = function() { alert(this.name+","+this.password); }; return object; } var object1 = createObject("zhangsan","123"); var object2 = createObject("lisi","456"); object1.get(); object2.get();
上面两种不带参数和带参数的工厂方法缺点:
每创建一个对象,内存中就创建一个get方法,比较浪费内存,且影响性能。而我们的期望是,创建两个不同的对象,它们的属性是不一样的,但方法是共用的。所以接下来我们需要改进createObject工厂方法。
改进的工厂方法:
JavaScript
function get(){ alert(this.name+","+this.password); } function createObject(name,password) { var object = new Object(); object.name = name; object.password = password; object.get = get; return object; } var object1 = createObject("zhangsan","123"); var object2 = createObject("lisi","456"); object1.get(); object2.get();
将get方法定义在createObject函数外面,这样每创建一个对象,get方法都是共用的。让一个函数对象被多个对象所共享,而不是每一个对象都拥有一个函数对象。
iii)构造函数方式创建对象
不带参数的构造函数:
JavaScript
function Person(){ //在执行第一行代码前,js引擎会为我们生成一个对象 this.name = "zhangsan"; this.password = "123"; this.getInfo = function() { alert(this.name+","+this.password); }; //此处有一个隐含的return语句,用于将之前生成的对象返回(也是跟工厂方式不一样的地方) } var p1 = new Person(); p1.getInfo();
带参数的构造函数
JavaScript
function Person(name,password) { this.name = name; this.password = password; this.getInfo = function() { alert(this.name+","+this.password); }; } var p1 = new Person("zhangsan","123"); var p2 = new Person("lisi","456"); p1.getInfo(); p2.getInfo();
iv)原型(prototype)方式创建对象
prototype是Object对象里面的一个属性
prototype
JavaScript
function Person(){ } Person.prototype.name = "zhangsan"; Person.prototype.password = "123"; Person.prototype.getInfo = function() { alert(this.name+","+this.password); }; var p1 = new Person(); var p2 = new Person(); p1.name = "kyle";//对象生成之后再去改变属性 p1.getInfo(); p2.getInfo();
单纯地使用原型方式有两个问题:第一,你无法在构造函数中为属性赋初值,只能在对象生成之后再去改变属性值。
prototype
JavaScript
function Person(){ } Person.prototype.name = new Array(); Person.prototype.password = "123"; Person.prototype.getInfo = function() { alert(this.name+","+this.password); }; var p1 = new Person(); var p2 = new Person(); p1.name.push("zhangsan"); p1.name.push("lisi"); p1.password = "456"; p1.getInfo(); p2.getInfo()
浏览器将会打印:zhangsan,lisi,456 和 zhangsan,lisi,123.
如果使用原型方式创建对象,那么生成的所有对象会共享原型中的属性,这样一个对象改变了该属性也会反应到其他对象当中。所以单纯地使用原型方式是不行的,还需要结合其他方式。接下来我们会继续介绍。
使用原型+构造函数方式来定义对象
JavaScript
function Person() { this.name = new Array(); this.password = "123"; } Person.prototype.getInfo = function() { alert(this.name+","+this.password); }; var p1 = new Person(); var p2 = new Person(); p1.name.push("zhangsan"); p2.name.push("lisi"); p1.getInfo(); p2.getInfo();
使用原型+构造函数方式来定义对象,对象之间的属性互不干扰,各个对象间共享同一个方法,这是一种比较好的方式。
v)动态原型方式
JavaScript
function Person(){ this.name = "zhangsan"; this.password = "123"; if(typeof Person.flag == "undefined"){ alert("invoked"); Person.prototype.getInfo = function(){ alert(this.name + "," + this.password); } Person.flag = true; } } var p1 = new Person(); var p2 = new Person(); p1.getInfo(); p2.getInfo();
在动态原型方式中,在构造函数中通过标志量让所有对象共享一个方法,而每个对象拥有自己的属性。上面代码在第一次创建对象时,首先通过一个判断语句,看flag属性是否已经定义,若没有定义,则通过原型方式添加getInfo方法,然后将flag设置为true,那么当第二次创建对象时,if语句判断为假,跳过执行。这样就达到了我们所期望的结果,创建的对象属性是互不干扰的,而对象的方法是共享的。
17、JavaScript中对象的继承(5种方式)
第一种方式:对象冒充
冒充对象继承
JavaScript
//父类 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); }; } //子类 function Child(username,password){ //下面三行代码是最关键的 this.method = Parent; this.method(username); delete this.method; this.password = password; this.sayWorld = function() { alert(this.password); }; } var p = new Parent("zhangsan"); var c = new Child("lisi","123"); p.sayHello(); c.sayHello(); c.sayWorld()
第二种方式:call()
继承的第二种实现方式,call方法方式,call方法是Function对象中定义的方法,因此我们定义的每个函数都拥有该方法。call方法的第一个参数会被传递给函数中的this,从第2个参数开始,逐一赋给函数中的参数。
call 继承父类
JavaScript
function test(str) { alert(this.name+","+str); } var object = new Object(); object.name = "zhangsan"; //test.call相当于调用了test函数 test.call(object,"html5war");//将object赋给了this
接下来我们用call方式实现对象的继承
JavaScript
//父类 function Parent(username){ this.username = username; this.sayHello = function() { alert(this.username); }; } //子类 function Child(username,password) { Parent.call(this,username); this.password = password; this.sayWorld = function() { alert(this.password); }; } var p = new Parent("zhangsan"); var c = new Child("lisi","123"); p.sayHello(); c.sayHello(); c.sayWorld();
第三种方式:apply()
apply 继承父类
JavaScript
//父类 function Parent(username){ this.username = username; this.sayHello = function(){ alert(this.username); }; } //子类 function Child(username,password){ Parent.apply(this,new Array(username)); this.password = password; this.sayWorld = function(){ alert(this.password); }; } var p = new Parent("zhangsan"); var c = new Child("lisi","123"); p.sayHello(); c.sayHello(); c.sayWorld();
apply方法与call方法很类似,apply方法也是定义在Function对象中的方法,因此我们定义的每个函数都拥有该方法。
apply方法与call方法有一个区别:Parent.apply(this,new Array(username));传递的第二个参数为一个数组,而call方法传递的是一些离散的数据参数。这两个方法并不能说谁好谁坏,要看具体使用场景。
第四种方式:原型链方式(无法给构造函数传递参数)
原型链继承
JavaScript
function Parent() { } Parent.prototype.hello = "hello"; Parent.prototype.sayHello = function() { alert(this.hello); }; function Child() { } Child.prototype = new Parent(); Child.prototype.world = "world"; Child.prototype.sayWorld = function() { alert(this.world); }; var c = new Child(); c.sayHello(); c.sayWorld();
单纯使用原型链方式的缺点:没有办法传递参数,只有等对象创建完之后再去修改。我们接下来结合其它的方式解决这个问题。
第五种方式:混合方式(推荐)
使用混合方式实现对象的继承
JavaScript
function Parent(hello) { this.hello = hello; } Parent.prototype.sayHello = function() { alert(this.hello); } function Child(hello,world) { Parent.call(this,hello); this.world = world; } Child.prototype = new Parent(); Child.prototype.sayWorld = function() { alert(this.world); } var c = new Child("hello","world"); c.sayHello(); c.sayWorld();
以上这篇JavaScript基础知识点归纳(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20