4JavaScript对象及初识面向对象

#JavaScript对象及初识面向对象

课件

1对象是什么

2创建对象

自定义对象

内置对象

3构造函数和原型对象

如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？

构造函数

使用构造函数创建新实例

调用构函数的4个步骤

创建一个新对象

将构造函数的作用域赋给新对象（this就指向了这个新对象）

执行构造函数中的代码

返回新对象

constructor属性instanceof操作符

原型对象

4继承

原型链

对象继承

组合继承

组合继承：有时也叫做伪经典继承

将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式

使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

总结

代码--此部分对比Java理解，特殊在prototype

示例1：创建对象new,.?=?,alert

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>创建对象</title>

</head>

<body>

<script>

    var flower=new Object();

    flower.name="长春花";

    flower.genera="夹竹桃科 长春花属";

    flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";

    flower.uses="观赏或用药等";

    flower.showName=function(){

        alert(this.name);

    }

    flower.showName();

</script>

</body>

</html>

示例2：字面量创建对象?:?

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>字面量赋值方式创建对象</title>

</head>

<body>

<script>

    var flower={

        name:"长春花",

        genera:"夹竹桃科 长春花属",

        area:"非洲、亚热带、热带以及中国大陆的华东、西南、中南等地",

        uses:"观赏或用药等",

        showName:function(){

            alert(this.name);

        }

    }

    flower.showName();

</script>

</body>

</html>

示例3：构造函数  同java

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>构造函数</title>

</head>

<body>

<script>

    function Flower(name,genera,area,uses){

        this.name=name;

        this.genera=genera;

        this.area=area;

        this.uses=uses;

        this.showName=function(){

            alert(this.name);

        }

    }

    var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等");

    flower1.showName();

    var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");

    flower2.showName();

    var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");

    flower3.showName();

    //alert(flower1.constructor==Flower);

    //alert(flower2.constructor==Flower);

   // alert(flower2.constructor==Flower);

    alert(flower1 instanceof Object);

    alert(flower1 instanceof Flower);

    alert(flower2 instanceof Object);

    alert(flower2 instanceof Flower);

    alert(flower3 instanceof Object);

    alert(flower3 instanceof Flower);

</script>

</body>

</html>

示例4：构造函数优化

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>构造函数</title>

</head>

<body>

<script>

    function Flower(name,genera,area,uses){

        this.name=name;

        this.genera=genera;

        this.area=area;

        this.uses=uses;

        this.showName=showName;

    }

    function showName(){

        alert(this.name);

    }

    var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等");

    var flower2=new Flower("牡丹","芍药科 芍药属","中国","观赏、食用或药用");

    var flower3=new Flower("曼陀罗花","茄科 曼陀罗属","印度、中国北部","观赏或药用");

    flower1.showName();

    flower2.showName();

    flower3.showName();

    alert(flower1 instanceof Object);

    alert(flower1 instanceof Flower);

    alert(flower2 instanceof Object);

    alert(flower2 instanceof Flower);

    alert(flower3 instanceof Object);

    alert(flower3 instanceof Flower);

    alert(flower1.constructor==Flower);

    alert(flower2.constructor==Flower);

    alert(flower3.constructor==Flower);

</script>

</body>

</html>

示例5：原型对象prototype=java的extends

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>原型对象</title>

</head>

<body>

<script>

    function Flower(){

    }

    Flower.prototype.name="曼陀罗花";

    Flower.prototype.genera="茄科 曼陀罗属";

    Flower.prototype.area="印度、中国北部";

    Flower.prototype.uses="观赏或药用";

    Flower.prototype.showName=function() {

        alert(this.name);

    }

    /*var flower1=new Flower();

    flower1.showName();

    var flower2=new Flower();

    flower2.showName();

    alert(flower1.showName==flower2.showName);*/

    var flower1=new Flower();

    var flower2=new Flower();

    flower1.name="长春花";

    alert(flower1.name);

    alert(flower2.name);

</script>

</body>

</html>

示例6：原型链-函数和prototype

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>原型链</title>

</head>

<body>

<script>

    function Humans(){

        this.foot=2;

    }

    Humans.prototype.getFoot=function(){

       return this.foot;

    }

    function Man(){

        this.head=1;

    }

    Man.prototype=new Humans();

    Man.prototype.getHead=function(){

        return this.head;

    }

    var man1=new Man();

    alert(man1.getFoot());

    alert(man1.getHead());

    alert(man1 instanceof Object);

    alert(man1 instanceof Humans);

    alert(man1 instanceof Man);

</script>

</body>

</html>

示例7：给原型添加方法prototype.方法

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>给原型添加方法</title>

</head>

<body>

<script>

    function Humans(){

        this.foot=2;

    }

    Humans.prototype.getFoot=function(){

        return this.foot;

    }

    function Man(){

        this.head=1;

    }

    //继承了Humans

    Man.prototype=new Humans();

    //添加新方法

    Man.prototype.getHead=function(){

        return this.head;

    }

    //重写父类型中的方法

    Man.prototype.getFoot=function(){

        return false;

    }

    var man1=new Man();

    alert(man1.getFoot());    //false

</script>

</body>

</html>

示例8：原型链的问题push

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>原型链的问题</title>

</head>

<body>

<script>

    function Humans(){

        this.clothing=["trousers","dress","jacket"];

    }

    function Man(){

     }

    //继承了Humans

    Man.prototype=new Humans();

    

    var man1=new Man();

    man1.clothing.push("coat");

    alert(man1.clothing);

    var man2=new Man();

    alert(man2.clothing);

</script>

</body>

</html>

示例9：借用构造函数call

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>借用构造函数</title>

</head>

<body>

<script>

    function Humans(){

        this.clothing=["trousers","dress","jacket"];

    }

    function Man(){

        Humans.call(this);   //继承了Humans

    }

    var man1=new Man();

    man1.clothing.push("coat");

    alert(man1.clothing);

    var man2=new Man();

    alert(man2.clothing);

</script>

</body>

</html>

示例10：借用构造函数传递参数

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>借用构造函数传递参数</title>

</head>

<body>

<script>

    function Humans(name){

        this.name=name;

    }

    function Man(){

        Humans.call(this,"mary");   //继承了Humans,同时还传递了参数

        this.age=38;                //实例属性

    }

    var man1=new Man();

    alert(man1.name);

    alert(man1.age);

</script>

</body>

</html>

示例11：组合继承

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>组合继承</title>

</head>

<body>

<script>

    function Humans(name){

        this.name=name;

        this.clothing=["trousers","dress","jacket"];

    }

    Humans.prototype.sayName=function(){

        alert(this.name);

    };

    function Man(name,age){

        Humans.call(this,name);    //继承属性

        this.age=age;

    }

    Man.prototype=new Humans();    //继承方法

    Man.prototype.sayAge=function(){

        alert(this.age);

    };

    var man1=new Man("mary",38);

    man1.clothing.push("coat");

    alert(man1.clothing);     //输出"trousers,dress,jacket,coat"

    man1.sayName();            //输出mary

    man1.sayAge();            //输出38

    var man2=new Man("tom",26);

    alert(man2.clothing);    //输出"trousers,dress,jacket"

    man2.sayName();            //输出tom

    man2.sayAge();            //输出26

</script>

</body>

</html>