JavaScript对象
 
 
1，对象的创建
 
 
 
1）对象初始化器方式
 
格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN} 
 property是对象的属性
 value则是对象的值，值可以是字符串、数字或对象三者之一
 例如： var user={name:“user1”,age:18}；
     var user={name:“user1”,job:{salary:3000,title:programmer}
 以这种方式也可以初始化对象的方法，例如：
 
   var user={name:“user1”,age:18,getName:function(){
            return this.name;
    }          
}
 
    后面将以构造函数方式为重点进行讲解，包括属性和方法的定义等等，也针对构造函数的方式进行讲解。
 
 
 
 
 
2）构造函数方式
 
编写一个构造函数，并通过new方式来创建对象，构造函数本可以带有构造参数
 例如：
 
  function User(name,age){ 
     this.name=name;
     this.age=age;
     this.canFly=false;
}
var use=new User();
 
 2，定义对象属性
 
 
 
1）JS中可以为对象定义三种类型的属性：私有属性、实例属性和类属性，与Java类似，私有属性只能在对象内部使用，实例属性必须通过对象的实例进行引用，而类属性可以直接通过类名进行引用。
 
 
 
2）私有属性定义
 私有属性只能在构造函数内部定义与使用。
 语法格式：var propertyName=value；
 例如：
 
  function User(age){
      this.age=age;
      var isChild=age<12;
      this.isLittleChild=isChild;
}
var user=new User(15);
alert(user.isLittleChild);//正确的方式
alert(user.isChild);//报错：对象不支持此属性或方法
 
 

 3）实例属性定义，也存在两种方式：
 prototype方式，语法格式：functionName.prototype.propertyName=value
 this方式，语法格式：this.propertyName=value，注意后面例子中this使用的位置
 上面中value可以是字符创、数字和对象。
 例如：
 
  function User(){ }
User.prototype.name=“user1”;
User.prototype.age=18;
var user=new User();
alert(user.age);
//—————————————–
function User(name,age,job){
    this.name=“user1”;
    this.age=18;
    this.job=job;
}
alert(user.age);
 
 

 3）类属性定义
 语法格式：functionName.propertyName=value
 例如：
 
  function User(){ }
User.MAX_AGE=200;
User.MIN_AGE=0;
alert(User.MAX_AGE);
 
 参考JS标准对象的类属性：
 Number.MAX_VALUE //最大数值 Math.PI //圆周率
 
 
 
4）对于属性的定义，除了上面较为正规的方式外，还有一种非常特别的定义方式，语法格式： obj[index]=value
 例子：
      function User(name){
    this.name=name;
    this.age=18;
    this[1]=“ok”;
    this[200]=“year”;
}
var user=new User(“user1”);
alert(user[1]);
 
 
     在上面例子中，要注意：不同通过this[1]来获取age属性，也不能通过this[0]来获取name属性，即通过index方式定义的必须使用index方式来引用，而没有通过index方式定义的，必须以正常方式引用
 
 
 
3，定义对象方法
 
 
 
1）JS中可以为对象定义三种类型的方法：私有方法、实例方法和类方法，与Java类似：
 私有方法只能在对象内部使用
 实例方法必须在对象实例化后才能使用
 类方法可以直接通过类名去使用
 注意：方法的定义不能通过前面所说的index方式进行。
 

 2）定义私有方法
 私有方法必须在构造函数体内定义，而且只能在构造函数体内使用。
 语法格式：function methodName(arg1,…,argN){ }
 例如：
 
  function User(name){
    this.name=name;
    function getNameLength(nameStr){
        return nameStr.length;
    }
    this.nameLength=getNameLength(this.name);    
}
 
 

 3）定义实例方法，目前也可以使用两种方式：
 prototype方式，在构造函数外使用，语法格式：
 functionName.prototype.methodName=method;
 或者
 functionName.prototype.methodName=function(arg1,…,argN){};
 this方式，在构造函数内部使用，语法格式：
 this.methodName=method;
 或者
 this.methodName=function(arg1,…,argN){};
 上面的语法描述中，method是外部已经存在的一个方法，methodName要定义的对象的方法，意思就是将外部的一个方法直接赋给对象的某个方法。
 以function(arg1,…,argN){}的方式定义对象方法是开发人员应该掌握的。
 
  //定义实例方法的一些例子：例子1
function User(name){
       this.name=name;
       this.getName=getUserName;
       this.setName=setUserName;
}
function getUserName(){
       return this.name;
}
Function setUserName(name){
       this.name=name;
}

//定义实例方法的一些例子：例子2
function User(name){
       this.name=name;
       this.getName=function(){
               return this.name;
       };
       this.setName=function(newName){
               this.name=newName;
       };
}

//定义实例方法的一些例子：例子3
function User(name){
       this.name=name;
}
User.prototype.getName=getUserName;
User.prototype.setName=setUserName();
function getUserName(){
       return this.name;
}
Function setUserName(name){
       this.name=name;
}

//定义实例方法的一些例子：例子4
function User(name){
       this.name=name;
}
User.prototype.getName=function(){
       return this.name;
};
User.prototype.setName=function(newName){
       this.name=newName;
};

 
 
 
 
4）定义类方法
 类方法需要在构造函数外面定义，可以直接通过构造函数名对其进行引用。
 语法格式：
 functionName.methodName=method;
 或者
 functionName.methodName=function(arg1,…,argN){};
 例子：
 function User(name){
             this.name=name;
     }
     User.getMaxAge=getUserMaxAge;
     function getUserMaxAge(){
            return 200;
     }
     或者
     User.getMaxAge=function(){return 200;};
     alert(User.getMaxAge());
 
 
 
4，属性与方法的引用
 
1）从可见性上说：
 私有属性与方法，只能在对象内部引用。
 实例属性与方法，可以在任何地方使用，但必须通过对象来引用。
 类属性与方法，可以在任何地方使用，但不能通过对象的实例来引用（这与Java不同，在Java中静态成员可以通过实例来访问）。
 

 2）从对象层次上说：
 与Java bean的引用类似，可以进行深层次的引用。
 几种方式：
 简单属性：obj.propertyName
 对象属性：obj.innerObj.propertyName
 索引属性：obj.propertyName[index]
 对于更深层次的引用与上面类似。
 

 3）从定义方式上说：
 通过index方式定义的属性，必须通过index方式才能引用。
 通过非index方式定义的属性，必须通过正常的方式才能引用。
 另外注意：对象的方法不能通过index方式来定义。
 
 
 
5，属性与方法的动态增加和删除
 

 1）对于已经实例化的对象，我们可以动态增加和删除它的属性与方法，语法如下（假定对象实例为obj）：
 动态增加对象属性
 obj.newPropertyName=value;
 动态增加对象方法
     obj.newMethodName=method或者=function(arg1,…,argN){}
 动态删除对象属性
     delete obj.propertyName
 动态删除对象方法
     delete obj.methodName
     
 2）例子：
     function User(name){
     this.name=name;
     this.age=18;
}
var user=new User(“user1”);
user.sister=“susan”;
alert(user.sister);//运行通过
delete user.sister;
alert(user.sister);//报错：对象不支持该属性

user.getMotherName=function(){return “mary”;}
alert(user.getMotherName());//运行通过
delete user.getMotherName;
alert(user.getMotherName());//报错：对象不支持该方法
 

对象是对类的实例化。对象具有状态和行为，变量用来表明对象的状态，方法表明对象所具有的行为。Java 对象的生命周期包括创建、使用和清除，本文详细介绍对象的创建，在 Java 语言中创建对象分显式创建与隐含创建两种情况。
 
显式创建对象
 
对象的显式创建方式有 4 种。
 
1. 使用 new 关键字创建对象
 这是常用的创建对象的方法，语法格式如下：
 类名 对象名=new 类名()；
 
2. 调用 java.lang.Class 或者 java.lang.reflect.Constuctor 类的 newlnstance() 实例方法
 在 Java 中，可以使用 java.lang.Class 或者 java.lang.reflect.Constuctor 类的 newlnstance() 实例方法来创建对象，代码格式如下：
 java.lang.Class Class 类对象名称=java.lang.Class.forName(要实例化的类全称);
 类名 对象名=(类名)Class类对象名称.newInstance();
 
调用 java.lang.Class 类中的 forName() 方法时，需要将要实例化的类的全称（比如 com.mxl.package.Student）作为参数传递过去，然后再调用 java.lang.Class 类对象的 newInstance() 方法创建对象。
 
3. 调用对象的 clone() 方法
 该方法不常用，使用该方法创建对象时，要实例化的类必须继承 java.lang.Cloneable 接口。 调用对象的 clone() 方法创建对象的语法格式如下：
 类名对象名=(类名)已创建好的类对象名.clone();
 
4. 调用 java.io.ObjectlnputStream 对象的 readObject() 方法
 
下面创建一个示例演示常用的前三种对象创建方法。示例代码如下：
 
public class Student implements Cloneable
{   
    //实现 Cloneable 接口
    private String Name;    //学生名字
    private int age;    //学生年龄
    public Student(String name,int age)
    {    //构造方法
        this.Name=name;
        this.age=age;
    }
    public Student()
    {
        this.Name="name";
        this.age=0;
    }
    public String toString()
    {
        return"学生名字："+Name+"，年龄："+age;
    }
    public static void main(String[] args)throws Exception
    {
        System.out.println("---------使用 new 关键字创建对象---------");
       
        //使用new关键字创建对象
        Student student1=new Student("小刘",22);
        System.out.println(student1);
        System.out.println("-----------调用 java.lang.Class 的 newInstance() 方法创建对象-----------");
       
        //调用 java.lang.Class 的 newInstance() 方法创建对象
        Class cl=Class.forName("Student");
        Student student2=(Student)cl.newInstance();
        System.out.println(student2);
        System.out.println("-------------------调用对象的 clone() 方法创建对象----------");
        //调用对象的 clone() 方法创建对象
        Student student3=(Student)student2.clone();
        System.out.println(student3);
    }
}

 
对上述示例的说明如下：
 
使用 new 关键字或 Class 对象的 newInstance() 方法创建对象时，都会调用类的掏造方法。
 使用 Class 类的 newInstance() 方法创建对象时，会调用类的默认构造方法，即无参构造方法。
 使用 Object 类的 clone() 方法创建对象时，不会调用类的构造方法，它会创建一个复制的对象，这个对象和原来的对象具有不同的内存地址，但它们的属性值相同。
 如果类没有实现 Cloneable 接口，则 clone。方法会抛出 java.lang.CloneNotSupportedException 异常，所以应该让类实现 Cloneable 接口。
 
程序执行结果如下：
 
---------使用 new 关键字创建对象---------
学生名字：小刘，年龄：22
-----------调用 java.lang.Class 的 newInstance() 方法创建对象-----------
学生名字：name，年龄：0
-------------------调用对象的done()方法创建对象----------
学生名字：name，年龄：0
 
隐含创建对象
 
除了显式创建对象以外，在 Java 程序中还可以隐含地创建对象，例如下面几种情况。
 ①String strName=“strValue”，其中的“strValue”就是一个 String 对象，由 Java 虚拟机隐含地创建。
 ②字符串的“+”运算符运算的结果为一个新的 String 对象，示例如下：
 String str1=“Hello”;
 String str2=“Java”;
 String str3=str1+str2; //str3引用一个新的String对象
 ③当 Java 虚拟机加载一个类时，会隐含地创建描述这个类的 Class 实例。
 
**提示：**类的加载是指把类的 .class 文件中的二进制数据读入内存中，把它存放在运行时数据区的方法区内，然后在堆区创建一个 java.lang.Class 对象，用来封装类在方法区内的数据结构。
 
无论釆用哪种方式创建对象，Java 虚拟机在创建一个对象时都包含以下步骤：
 
给对象分配内存。
将对象的实例变量自动初始化为其变量类型的默认值。
初始化对象，给实例变量赋予正确的初始值。
 
注意： 每个对象都是相互独立的，在内存中占有独立的内存地址，并且每个对象都具有自己的生命周期，当一个对象的生命周期结束时，对象就变成了垃圾，由 Java 虚拟机自带的垃圾回收机制处理。

这里只要简单的记住JSON的二个符号就OK
 
{} 代表一个对象
 
[] 代表数组，数组元素类型任意
 
写一个简单的json对象
 
var obj={
 
 name:"zhangsan",
 
 age:10,
 
 into:function(){alert(this.name+"   "+this.age)};
 
}; 
 
obj就是一个js的对象，该语法完全符合json的语法。
 
下面一个例子就是使用json格式的数据进行级联菜单的实现。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 </head>
 <body>
 <select id="province" style="width:150px">
 </select>
 <select id="cities" style="width:150px">
 </select>
 <script type="text/javascript" src="cascade.js">
 </script>
 </body>
 </html>
 
 
cascase.js
 
var data = [ {
 id : 1,
 name : "湖南",
 cities : [ {
 id : 11,
 name : "衡阳"
 }, {
 id : 12,
 name : "岳阳"
 }, {
 id : 13,
 name : "花果山"
 }, {
 id : 14,
 name : "尚阳"
 } ]
 }, {
 id : 2,
 name : "黑龙江",
 cities : [ {
 id : 21, 
 name : "齐齐哈尔"
 }, {
 id : 22,
 name : "大庆"
 }, {
 id : 23,
 name : "佳木斯"
 }, {
 id : 24,
 name : "宜春"
 } ]
 } ];
 
 
 var province = document.getElementById("province");
 var cities = document.getElementById("cities");
 province.innerHTML="";
 for ( var i=0,len=data.length;i<len;i++) {
 var op=document.createElement("option");
 op.value=data[i].id;
 op.innerHTML=data[i].name;
 province.appendChild(op);
 }
 
 
 province.οnchange=function(){
 cities.innerHTML="";
 var showcities=data[province.value-1].cities;
 for(var i=0,len=showcities.length;i<len;i++){
 var op=document.createElement("option");
 op.Value=showcities[i].id;
 op.innerHTML=showcities[i].name;
 cities.appendChild(op);
 }
 };
 
 
 
 
 
 
 
 

 

创建实例对象
 
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：
 
var vm = new Vue({
	//选项
})
 
选项：
 
el：
 
类型：string | HTMLElement
限制：只在由 new 创建的实例中遵守。
详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
例如：el: "#app"
 
data：
 
类型：Object
定义数据，例如: data:{n:1,m:2}
 
methods：
 
类型：Object
包含函数
例如：methods:{fun:function(){}}
 
Vue基本模板
 
因此在文档中经常会使用vm (ViewModel 的简称) 这个变量名表示 Vue 实例。
 当创建一个 Vue 实例时，你可以传入一个选项对象。
 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
	<!-- reset.css -->
<!-- <link rel="stylesheet" href="reset.css"> -->
	<!-- vue.js -->
<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
</head>
<body>
	
	<!-- MVVM：V(视图层) -->
	<div id="app">
		<span>{{ msg }}<span>
	</div>
	<!-- end -->

<script>
// 创建vue实例 => 此时浏览器中就多了一个vue构造函数
	// MVVM：VM(调度者,中间层)
	var vm = new Vue({
	// el属性：当前实例对象要控制的某个区域
    el:'#app',
    // data：存放el区域的数据及方法
    // MVVM:M(数据层)
    data:{
        msg:"hello world",
    };
})
</script>
</body>
</html>