JavaScript學習 - Onlywjy－IT工程師數位筆記本

文章出處

什么是JavaScript？

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能

JavaScript組成

核心語法（ECMAScript）

瀏覽器對象模型（BOM）
文檔對象模型（DOM）

JavaScript數據類型

字符串、數字、布爾、數組、對象、Null、Undefined

JavaScript創建數組的方式

單純創建數組

var array=new Array();
var arr=[];

創建數組的同時規定數組大小

var varry=new Array(10);

直接初始化

var array=new Array("haha","hehe","eee");
var arr=["haha","hehe","eee"]

JavaScript自定義對象的方式有哪幾種都有什么優缺點？

基于已有對象擴充其屬性和方法

優點：簡單易用
缺點：可復用性不強，如果需要使用多個對象，還需要重新擴展其屬性和方法。

<script type="text/javascript">
  var object = new Object();
  object.name = "wjy";
  object.sayName = function(name) {
    this.name = name;
    alert(this.name);
  }
  object.sayName("haha");
</script>

對象初始化器方式

優點：結構簡明易讀
缺點：創建許多相同的對象時，每次都要重復編寫代碼。無法確定創建的對象的具體類型

var user = {
  name: "wjy",
  age: 21,
  getName: function() {
    return this.name;
  },
  getInfo: function() {
    document.writeln("我是" + this.getName() + ":" + this.age + "歲");
  }
}
user.getInfo();

工廠方式

缺點：對象和它的方法定義分開了，可能會造成誤解和誤用。
優點：讓一個函數對象被多個對象所共享，而不是每一個對象擁有一個函數對象。

//不帶參數
function createObject() {
    var object = new Object();
    object.name = "wjy";
    object.password = "123";
    object.get = function() {
      alert(this.name + "," + this.password);
    }
    return object;
  }
  var object1 = createObject();
  var object2 = createObject();
  object1.get();
  //帶參數的構造方法
  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 object3 = createObject("yjw", "321");
  object3.get();
  //多個對象共享函數對象
  function get() {
    alert(this.name + "," + this.password);
  }
  function createObject1(name, password) {
    var object = new Object();
    object.name = name;
    object.password = password;
    object.get = get; //每一個對象的函數對象都指向同一個函數對象
    return object;
  }
  var object4 = createObject1("haha", "1230");
  var object5 = createObject1("hahaha", "dsf");
  object4.get();
  object5.get();

構造函數方式

優點：封裝屬性初始化。
缺點：構造函數內聲明的方法在每次創建新對象時都會重新創建（在JavaScript中，函數也是對象）. 也就是說，構造函數內的方法是與對象綁定的，而不是與類綁定的。

function Student() {
  //在執行第一行代碼前，js引擎會為我們生成一個對象
  this.Id = "123456";
  this.name = "wjy";
  this.getInfo = function() {
    alert(this.Id + ":" + this.name);
  }
  //此處有一個隱藏的return語句，用于將之前生成的對象返回
  //只有在后面用new的情況下，才會出現注釋所述的這兩點情況\
}
var s = new Student();
 s.getInfo();
function Student(Id, name) {
  this.Id = Id;
  this.name = name;
  this.getInfo = function() {
    alert(this.Id + ":" + this.name);
  }
}
var s1 = new Student("jha", "hjah0");
s1.getInfo();

原型方式

在我們聲明一個新的函數后，該函數（在JavaScript中，函數也是對象）就會擁有一個prototype的屬性。prototype是一個對象，表示會被該函數創建的所有對象擁有的公共屬性和方法。

缺點：1.如果使用原型方式來定義對象，那么生成的所有對象會共享原型中的屬性，這樣一個對象改變了該屬性也會反映到其他對象當中。

2.　單純使用原型方式定義對象無法在構造函數中為屬性賦初值，解決的方法就是混合使用構造函數模式或只能在對象生成后再去改變屬性值。

function Student() {
}
Student.prototype.Id = "8999";
Student.prototype.name = "wjy";
Student.prototype.getInfo = function() {
  alert(this.Id + ":" + this.name);
}
var stu1 = new Student();
var stu2 = new Student();
stu1.getInfo();
stu2.name = "yjw";
stu2.getInfo();
function Person() {}
Person.prototype.username = new Array();
Person.prototype.password = "321";
Person.prototype.getInfo = function() {
  alert(this.username + ":" + this.password);
}
var p1 = new Person();
var p2 = new Person();
p1.username.push("wjy");
p1.username.push("wjy2");
p1.password = "123";
p1.getInfo(); //wjy,wjy2:123
p2.getInfo(); //wjy,wjy2:321

原型 + 構造函數方式:

對象之間的屬性互不干擾，各個對象間共享同一個方法。

function Person(name, password) {
  this.name = name;
  this.password = password;
}
Person.prototype.getInfo = function() {
  alert(this.name + ":" + this.password);
}
var p3 = new Person("wjy", 123);
var p4 = new Person("yjw", 33);
p3.getInfo();
p4.getInfo();
alert(p3.getInfo() == p4.getInfo())

動態原型方式

在構造函數中通過標志量讓所有對象共享一個方法，而每個對象擁有自己的屬性。

function Person() {
  this.name = "wjy";
  this.password = "123";
  if (typeof Person.flag == "undefined") {
    alert("invoked"); //在第一次調用的時候執行
    Person.prototype.getInfo = function() {
      //定義在原型中，被每個對象所共同擁有
      alert(this.name + ":" + this.password);
    }
    Person.flag = true; //第一次定義完之后，之后的對象就不需要再進來這塊代碼了
  }
}
var p5 = new Person();
var p6 = new Person();
p5.getInfo();
p6.getInfo();

文章列表