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>