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

定义在函数外的变量一定是全局变量；定义在函数内的变量，如果声明了var，那该变量就是局部变量，如果不声明var，那么该变量就是全局变量。

1、全局变量与局部变量

javascript

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基础知识点归纳(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。