JavaScript學習筆記（五）
阿新 • • 發佈：2018-10-24
proto 指定 wid 獲取 .proto let 數組 func object 本課程學習視頻教程：http://edu.51cto.com/course/15019.html
1、javascript的面向對象
1.1、創建對象的方式
方式一：使用object對象搞定
<script type="text/javascript"> //創建一個對象 var object = new Object(); //在js中對象可以動態的添加屬性和方法 object.name = "張三"; object.age = 15 ; //動態添加方法 object.sayHello=function(){ console.log(this.name,this.age); }; //動態刪除某個對象的方法或者屬性 delete object.sayHello; //object.sayHello(); console.log(object); </script>
方式二：json格式
json的格式：
var stu={
name:"zhangsan",
addr:"南京",
age:15,
say:function () {
console.log(this.name,this.age,this.addr);
}
}
stu.say();json數組：
value的變化多端
<script type="text/javascript"> var students=[ { name:"關羽", type:"坦克" }, { name:"阿珂", type:"刺客" }, { name:"老亞瑟", type:"坦克" }, { name:"王昭君", type:"法師" } ] for(var i = 0;i<students.length;i++) { console.log(students[i].name,students[i].type) } </script>
方式三：工廠方法
function createObject(name,age){ var object = new Object(); object.name = name; object.age=age; object.say=function(){ console.log(this.name,this.age); } return object ; } //創建對象 var object1 = createObject("張三",15); //調用方法 object1.say(); //創建對象 var object2 = createObject("李四",20); //調用方法 object2.say();
方式四：構造函數
題外話
function Person(){
console.log(this.name,this.age);
}
//函數的普通調用方式
window.name="hello";
window.age=15;
Person();
Person();
默認直接調用函數實際上調用的對象是window對象創建對象
<script type="text/javascript">
function Person(name,age){
this.name = name
this.age = age;
this.say=sayInfo;
}
function sayInfo(){
console.log(this.name,this.age);
}
//采用new的方式調用實際上省略了創建對象和返回對象的過程
var p1 = new Person("張三",15);
var p2 = new Person("李四",20);
p1.say();
p2.say();
</script>方式五：原型模式
<script type="text/javascript">
//構造中一般放屬性
function Person(name,age){
this.name = name ;
this.age = age ;
}
//通過prototype屬性，我們可以原型上加上方法和屬性
Person.prototype.say=function(){
console.log(this.name,this.age);
};
Person.prototype.sayWorld=function(){
console.log("helloworld");
};
var p1 = new Person("zhangsan",15);
var p2 = new Person("lisi",16);
console.log(p1);
console.log(p2);
p1.sayWorld();
p2.sayWorld();
</script>1.2、繼承
1.2.1、對象冒充方式
利用的原理就是動態添加方法，轉移this的指向
<script type="text/javascript">
function Parent(name) {
console.log(this);
this.name = name ;
}
function Son(name,age) {
//Parent(name);
this.method=Parent;
this.method(name);
//將這個method方法在動態刪除掉
delete this.method;
//子類特有的
this.age = age ;
}
var s = new Son("張三",15);
console.log(s.name,s.age);
</script>1.2.2、apply和call方式
call方法介紹
call 方法:調用一個對象的一個方法，以另一個對象替換當前對象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數
thisObj:可選項。將被用作當前對象的對象。
arg1, arg2, , argN:可選項。將被傳遞方法參數序列。使用call方法來改寫上面的案例
<script type="text/javascript">
function Parent(name) {
console.log(this);
this.name = name ;
}
function Son(name,age) {
Parent.call(this,name);
//子類特有的
this.age = age ;
}
var s = new Son("張三",15);
console.log(s.name,s.age);
</script>apply：和call用法基本一致
apply 方法:應用某一對象的一個方法，用另一個對象替換當前對象。
apply([thisObj[,argArray]])
參數:thisObj可選項。將被用作當前對象的對象。
argArray：可選項。將被傳遞給該函數的參數數組。
apply方式來改寫案例
<script type="text/javascript">
function Parent(name) {
console.log(this);
this.name = name ;
}
function Son(name,age) {
Parent.apply(this,[name]);
//子類特有的
this.age = age ;
}
var s = new Son("張三",15);
console.log(s.name,s.age);
</script>1.2.3、采用原型+apply的混合方式實現繼承
<script type="text/javascript">
function Parent(name) {
console.log(this);
this.name = name ;
}
//父類的方法
Parent.prototype.sayHello=function(){
console.log("helloworld");
}
function Son(name,age) {
Parent.apply(this,[name]);
//子類特有的
this.age = age ;
}
//將父類原型上的屬性和方法移植子類中
Son.prototype=new Parent();
var s = new Son("張三",15);
console.log(s.name,s.age);
s.sayHello();
</script>補充知識點：
callee :返回正被執行的 Function對象，也就是所指定的 Function 對象的正文
function factorial(n){
if (n <= 0)
return 1;
else
return n * arguments.callee(n - 1)
}
console.log(factorial(5));eval()：執行eval參數中js代碼
eval("var mydate = new Date();");
alert(mydate);練習：
編寫一個形狀類，它是一個父類
然後編寫一個長方形類，要求求出長方形的周長
在編寫一個三角形類，求出三角形的周長
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function Shape(width){
this.width=width;
}
Shape.prototype.getLength=function(){
console.log(‘正在獲取長度‘);
};
function Rectangle(width,height){
Shape.call(this,width);
this.height = height;
}
Rectangle.prototype = new Shape();
Rectangle.prototype.getLength=function(){
return (this.width+this.height)*2;
};
//創建一個長方形對象
var re = new Rectangle(10,20);
console.log(re);
console.log(re.getLength());
//對象的__proto__恒等於Rectangle.prototype屬性
//console.log(re.__proto__===Rectangle.prototype);
console.log(1=="1");
//先比較數據類型，如果數據類型不一樣，就直接over（false）
console.log(1==="1");
//創建一個三角形的類
function Triangle(width,height,c){
Shape.call(this,width);
this.height=height;
this.c = c ;
}
Triangle.prototype = new Shape();
Triangle.prototype.getLength = function(){
return this.width+this.height+this.c;
}
var tr = new Triangle(1,2,3);
console.log("三角形的長度為："+tr.getLength());
</script>
</head>
<body>
</body>
</html>JavaScript學習筆記（五）