javaScript對象
阿新 • • 發佈：2017-06-29
特點 字面量 書寫 自身 .sh 學生 info json數據 json
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>創建對象</title> </head> <body> <script type="text/javascript"> //創建一個學生對象 var student=new Object(); /*對象的屬性*/ student.name="小黑"; student.age=50; student.address="黃土高坡"; /*對象的行為 函數*/ student.showInfo=function(){ document.write("姓名："+this.name); document.write("年齡："+student.age); document.write("地址："+this.address); } /*調用方法*/ student.showInfo(); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>通過字面量賦值的方式創建對象</title> </head> <body> <script type="text/javascript"> /*創建一個學生對象 * {中的內容是json數據格式} * 特點就是 ---》 * 屬性名1：屬性值1, * 屬性名2：屬性值2, * 屬性名3：屬性值3 * * student就是一個變量，也是一個對象 **/ var student={ /*對象的屬性*/ name:"小白", age:50, address:"地獄", /*對象的行為 函數*/ showInfo:function(){ document.write("姓名："+this.name+"<br/>"); document.write("年齡："+this.age+"<br/>"); document.write("地址："+this.address+"<br/>"); }, showName:function(){ document.write("姓名："+this.name+"<br/>"); } } /*調用方法*/ student.showInfo(); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>通過構造函數創建多個對象</title> </head> <body> <script type="text/javascript"> /*Student必須首字母大寫 所有對象公用的構造方法*/ function Student(name,age,address){ /*給屬性賦值*/ this.name=name; this.age=age; this.address=address; /*設置方法*/ this.showInfo=function(){ document.write("姓名："+this.name+"<br/>"); document.write("年齡："+this.age+"<br/>"); document.write("地址："+this.address+"<br/>"); }; this.showName=function(){ document.write("姓名："+this.name+"<br/>"); } } //真正的對象 var stu1=new Student("小黑",50,"上海1"); var stu2=new Student("小白",60,"上海2"); var stu3=new Student("小紅",70,"上海3"); /*調用對象的方法*/ stu1.showName(); stu2.showName(); stu3.showInfo(); /*所有的對象都有一個constructor屬性 指向了構造方法*/ alert(stu1.constructor==Student); /*instanceof 判斷對象是否屬於某個類型*/ alert(stu1 instanceof Student); alert(stu1 instanceof Object); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原型對象</title> </head> <body> <script type="text/javascript"> /*創建一個構造函數*/ function Student(){ } /*每個函數中都有一個prototype(原型對象) * 這個屬性就是一個指針，指向了一個對象！ * * prototype就是通過構造函數來創建這個對象實例的原型對象！ * */ Student.prototype.name="小黑"; Student.prototype.age=50; Student.prototype.address="天堂"; /*書寫方法*/ Student.prototype.showInfo=function(){ document.write("姓名："+this.name+"<br/>"); document.write("年齡："+this.age+"<br/>"); document.write("地址："+this.address+"<br/>"); }; Student.prototype.showName=function(){ document.write("姓名："+this.name+"<br/>"); } /*創建對象*/ var stu1=new Student(); stu1.name="哈哈"; stu1.showInfo(); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原型鏈</title> <!-- 原型鏈： 一個原型對象 是另一個原型對象的實例！ 相關的原型對象層層遞進，就構成了 實例與原型對象的鏈條！--> </head> <body> <script type="text/javascript"> /*創建了一個動物構造函數*/ function Animal(){ this.name="動物類"; } /*寫了一個獲取名稱的方法*/ Animal.prototype.getName=function(){ return this.name; } Animal.prototype.sayHello=function(){ return "動物好"; } /*創建一個小狗狗構造函數*/ function Dog(){ this.name="小狗"; } /*Dog原型對象是Animal原型對象的實例*/ Dog.prototype=new Animal(); Dog.prototype.getName=function(){ return this.name; } /*重寫父類中的方法*/ Dog.prototype.sayHello=function(){ return "小狗好"; } /*創建小狗對象*/ var dog=new Dog(); document.write(dog.getName()); //自身的方法 document.write(dog.sayHello()); //自身的方法 var animal=new Animal(); document.write(animal.getName()); //自身的方法 動物 </script> </body> </html>
<body> <script type="text/javascript"> function Person(){ this.names=["小黑","小紅","小豆腐"]; } function Student(){ } //讓學生繼承 Person Student.prototype=new Person(); //創建一個學生對象 var stu1=new Student(); stu1.names.push("小白"); document.write(stu1.names); //再創建一個對象 var stu2=new Student(); document.write(stu2.names); </script> </body>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>借用構造函數</title> </head> <body> <script type="text/javascript"> function Person(){ this.names=["小黑","小紅","小豆腐"]; } function Student(){ Person.call(this); //繼承了 Person } //創建一個學生對象 var stu1=new Student(); stu1.names.push("小白"); document.write(stu1.names+"<br/>"); //再創建一個對象 var stu2=new Student(); document.write(stu2.names); //沒有小白！ </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>借用構造函數 傳遞參數</title> </head> <body> <script type="text/javascript"> function Person(name){ this.name=name; } function Student(){ Person.call(this,"小黑"); //繼承了 Person的同時 傳遞了參數 this.age=50; } //創建學生對象 var stu=new Student(); document.write(stu.name); document.write(stu.age); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>組合繼承</title> </head> <body> <script type="text/javascript"> /*構造方法*/ function Person(name){ this.name=name; this.names=["hei","bai","pei"]; } Person.prototype.sayHello=function(){ alert(this.name); } function Student(name,age){ Person.call(this,name); //繼承屬性 this.age=age; } Student.prototype=new Person();//繼承了方法 //student特有的方法 Student.prototype.sayBey=function(){ alert(this.name); } /*創建對象*/ var stu=new Student("小黑黑",50); stu.names.push("小白白"); document.write(stu.names+"<br/>"); stu.sayHello(); stu.sayBey(); var stu1=new Student("小黑黑2",50); document.write(stu1.names+"<br/>"); stu1.sayHello(); stu1.sayBey(); </script> </body> </html>
javaScript對象