JavaScript學習筆記（五）

本課程學習視頻教程：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>