masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > JavaScript基础知识点归纳

JavaScript基础知识点归纳

高洛峰
Lepaskan： 2017-01-21 09:44:43
asal
1327 orang telah melayarinya

定义在函数外的变量一定是全局变量；定义在函数内的变量，如果声明了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);
Salin selepas log masuk

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
Salin selepas log masuk

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);
}
Salin selepas log masuk

上面的代码中，浏览器并没有打印出什么，并不能说明Object对象不带有任何属性。下面代码测试Object对象中的属性是否可以枚举，如果返回false，则说明Object对象中的属性是不能枚举的。

Object对象中的属性是不能枚举的

JavaScript

alert(object.propertyIsEnumerable("prototype"));
Salin selepas log masuk

浏览器弹出false对话框，则说明Object对象中的属性是不能枚举的。

接下来我们再看看window对象中的属性是否可以枚举的

window对象中的属性是可以枚举的

JavaScript

for (var v in window) {
  console.log(v);
}
Salin selepas log masuk

在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);
Salin selepas log masuk

14、JavaScript中定义对象最常见的方式

定义对象最常见的方式

JavaScript

var object = {
  username:"zhangsan",
  password:12345
};
alert(object.username);
alert(object.password);
Salin selepas log masuk

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);
Salin selepas log masuk

调用数组的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);
Salin selepas log masuk

我们再用匿名函数的方式实现：

匿名函数排序

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);
Salin selepas log masuk

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
Salin selepas log masuk

最简单的一种方式，使用起来并不方便，适合于临时需要一个对象。

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方法
Salin selepas log masuk

带参数的工厂方法：

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();
Salin selepas log masuk

上面两种不带参数和带参数的工厂方法缺点：

每创建一个对象，内存中就创建一个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();
Salin selepas log masuk

将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();
Salin selepas log masuk

带参数的构造函数

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();
Salin selepas log masuk

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();
Salin selepas log masuk

单纯地使用原型方式有两个问题：第一，你无法在构造函数中为属性赋初值，只能在对象生成之后再去改变属性值。

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()
Salin selepas log masuk

浏览器将会打印：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();
Salin selepas log masuk

使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法，这是一种比较好的方式。

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();
Salin selepas log masuk

在动态原型方式中，在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。上面代码在第一次创建对象时，首先通过一个判断语句，看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()
Salin selepas log masuk

第二种方式: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
Salin selepas log masuk

接下来我们用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();
Salin selepas log masuk

第三种方式: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();
Salin selepas log masuk

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();
Salin selepas log masuk

单纯使用原型链方式的缺点：没有办法传递参数，只有等对象创建完之后再去修改。我们接下来结合其它的方式解决这个问题。

第五种方式:混合方式(推荐)

使用混合方式实现对象的继承

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();
Salin selepas log masuk

以上这篇JavaScript基础知识点归纳(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多JavaScript基础知识点归纳相关文章请关注PHP中文网！

Label berkaitan：
JavaScript 基础
sumber：php.cn
Artikel sebelumnya：JS基础随笔(菜鸟必看篇) Artikel seterusnya：Javascript基础学习笔记(菜鸟必看篇)
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
kaunter modal Saya cuba mencipta modal dengan pembilang +/-. Walau bagaimanapun, saya fikir kerana keada...
daripada 2024-04-03 14:16:44
0
1
298
POST meminta untuk mengekstrak GUID daripada tapak web .aspx menggunakan Mechanize Terdapat tapak web yang dipanggil https://www.guidgenerator.com/online-guid-generator.aspx...
daripada 2024-04-02 12:43:40
0
1
420
Pengaktifan butang menyebabkan kesan hover tidak berfungsi Saya telah cuba mempelajari asas pembangunan web (HTML, CSS dan JS), jadi saya telah cuba ...
daripada 2024-04-01 21:51:26
0
1
396
Tidak boleh memusatkan teks menggunakan CSS + HTML Saya cuba memusatkan teks menggunakan CSS dan HTML. Saya sangat baru dalam pembangunan web...
daripada 2024-03-31 15:57:04
0
1
322
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan