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

站长资源 2024/11/16 佚名

54 1538 54

相思资源网 Design By www.200059.com

定义在函数外的变量一定是全局变量；定义在函数内的变量，如果声明了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基础知识点归纳(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

JavaScript基础知识

标签：

JavaScript基础知识

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“JavaScript基础知识点归纳(推荐)”

暂无JavaScript基础知识点归纳(推荐)的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

JavaScript基础知识

jQuery实现可以编辑的表格实例详解【附demo源码下载】

jQuery EasyUI学习教程之datagrid点击列表头排序

评论“JavaScript基础知识点归纳(推荐)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

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

JavaScript基础知识

jQuery实现可以编辑的表格实例详解【附demo源码下载】

jQuery EasyUI学习教程之datagrid点击列表头排序

评论“JavaScript基础知识点归纳(推荐)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存