下面小编就为大家带来一篇 JavaScript 基础知识点归纳 (推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
定义在函数外的变量一定是全局变量;定义在函数内的变量,如果声明了 var,那该变量就是局部变量,如果不声明 var,那么该变量就是全局变量。
1、全局变量与局部变量
- 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 基础知识点归纳 (推荐) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0304/264379.html