JavaScript学习

什么是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();