zoukankan      html  css  js  c++  java
  • 2017年6月21号课堂笔记

    2017年6月21号 星期三 多云转雷阵雨 空气质量:中度污染~轻度污染

    内容: JavaScript 原型式面向对象

    01基于Object的对象的方式创建对象;02使用字面量赋值方式创建对象

    03构造函数;04原型对象;05原型链

    备注:老师休养回来第二节课,希望他手术的伤口尽快愈合,远离伤病痛苦。

    一、基于Object的对象的方式创建对象

    1、老师代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>基于Object对象的方式创建对象</title>
    </head>
    <body>
    <script type="text/javascript">
    //创建对象
    var student=new Object();
    //给对象增加属性
    student.name="小黑";
    student.age=50;
    student.address="海淀";
    //给对象增加方法
    student.sleep=function(){
    alert(this.name+"在睡觉");
    }
    //调用方法
    student.sleep();


    </script>

    </body>
    </html>

    2、自己代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>基于Object创建对象</title>
    </head>
    <body>
    <script type="text/javascript">
    //创建对象
    var person=new Object();
    //给对象增加属性
    person.name="香吉士";
    person.age="32";
    person.address="路飞的船上";
    //给对象增加方法
    person.cook=function(){
    alert(this.name+"在做大餐!口水~");
    }
    //调用方法
    person.cook();
    </script>
    </body>
    </html>

    二、使用字面量赋值方式创建对象

    1、老师代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>使用字面量赋值方式创建对象</title>
    <!-- 字面量: 等号右边的!
    var a="haha";
    a:变量名
    haha:字面量
    -->
    </head>
    <body>

    <script type="text/javascript">
    //使用字面量赋值方式创建对象
    var student={
    name:"小白",
    age:50,
    address:"北京海淀区",
    sleep:function(){
    alert(this.name+"在睡觉");
    }
    };
    //调用方法
    student.sleep();
    //如果说我们需要N个对象呢? 而且都有这些属性和方法???怎么避免代码重复?
    </script>



    </body>
    </html>

    2、自己代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>使用字面量赋值方式创建对象</title>
    </head>
    <body>
    <script type="text/javascript">
    //使用字面量赋值方式创建对象
    var person={
    name:"郎晓明",
    age:"38",
    job:"中国内地男演员,歌手",
    address:"北京市海淀区",
    intro:function(){
    alert("姓名:"+this.name+" 年龄:"+this.age+" 工作:"+this.job+" 住址:"+this.address);
    }
    };
    //调用方法
    person.intro();
    </script>
    </body>
    </html>

    三、构造函数

    1、老师代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>构造函数</title>
    <!--
    01.创建对应类型的对象
    02.使用this关键字赋值(属性,方法)
    03.new关键字


    定义构造函数的注意事项:
    01.首字母大写
    02.如果没有返回值,会自动创建对应类型的对象返回给我们
    03.如果有返回值,就会返回这个返回值的类型!
    -->
    </head>
    <body>

    <script type="text/javascript">

    //定义一个构造函数
    function Student(name,age,address){
    //给属性赋值
    this.name=name;
    this.age=age;
    this.address=address;
    /*设置方法
    this.showInfo=function(){
    alert("姓名:"+name+" "+"年龄:"+age+" "+"地址:"+address);
    }*/
    this.showInfo=showInfo;
    }
    //全局作用域的方法 ! 让所有的对象共享这个方法的实例
    function showInfo(){
    alert("姓名:"+this.name+" "+"年龄:"+this.age+" "+"地址:"+this.address);
    }

    /*验证有返回值
    function Person(name){
    var obj=new Object();
    obj.name=name;
    return obj;
    }
    var obj1=new Person("haha");
    alert(obj1 instanceof Person); false
    alert(obj1 instanceof Object); true*/

    //创建多个对象
    var stu1=new Student("小黑1",10,"海淀1");
    var stu2=new Student("小黑2",20,"海淀2");
    var stu3=new Student("小黑3",30,"海淀3");
    //调用各自的自我介绍方法
    /* stu1.showInfo();
    stu2.showInfo();
    stu3.showInfo();
    alert(stu1 instanceof Student);*/

    //我们的showInfo是所有对象共有的方法!应该具有一个实例!!!
    //alert(stu1.showInfo==stu2.showInfo); false

    //优化 把这个方法提取出来 变成全局作用域的方法
    alert(stu1.showInfo==stu3.showInfo);
    //直接调用showInfo 发现 里面的数据 是没有的! 失去这个方法的意义了? 找不到this
    showInfo();


    </script>

    </body>
    </html>

    2、自己代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>构造函数</title>
    </head>
    <body>
    <script type="text/javascript">
    //定义构造函数
    function Pirate(name,age,job){
    //给属性赋值
    this.name=name;
    this.age=age;
    this.job=job;

    //设置方法
    this.showInfo= function () {
    alert("姓名:"+name+" 年龄:"+age+" 职业:"+job);
    }

    }
    //创建多个对象
    var pirate1=new Pirate("luffy",20,"captain");
    var pirate2=new Pirate("zoro",21,"swordman");
    var pirate3=new Pirate("sanji",23,"chef");

    //调用各自的自我介绍方法
    pirate1.showInfo();
    pirate2.showInfo();
    pirate3.showInfo();
    </script>
    </body>
    </html>

    四、原型对象

    1、老师代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>原型对象</title>
    <!--
    所有的对象都有一个原型对象(prototype),
    原型对象中有一个constructor属性指向了 包含prototype属性的构造函数!


    原型对象:内存中给其他对象提供共享的属性和方法的对象!

    -->
    </head>
    <body>

    <script type="text/javascript">
    //构造函数
    function Student(name,age,address){
    /**
    * 这里面的属性和方法就是所有实例都可以共享的!
    * 如果我们创建了N个对象!那么这N个对象使用的都是同一个属性和方法!
    */
    Student.prototype.name=name;
    Student.prototype.age=age;
    Student.prototype.address=address;
    Student.prototype.showInfo=function(){
    alert("姓名:"+this.name+" "+"年龄:"+this.age+" "+"地址:"+this.address);
    }
    }

    //创建对象
    var stu1=new Student("小河",10000,"水流淌");
    stu1.showInfo();
    var stu2=new Student("大河",500,"哗啦啦");
    stu2.showInfo();
    //alert(stu1.showInfo==stu2.showInfo); //true

    alert(stu1.constructor==Student); //true
    alert(stu1.__proto__==Student.prototype); //true


    </script>


    </body>
    </html>

    2、自己代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>原型对象</title>
    </head>
    <body>
    <script type="text/javascript">
    function Pirate(name,age,job){
    Pirate.prototype.name=name;
    Pirate.prototype.age=age;
    Pirate.prototype.job=job;
    Pirate.prototype.showInfo= function () {
    alert("姓名:"+name+" 年龄:"+age+" 职业:"+job);
    }
    }
    //创建对象
    var pirate1=new Pirate("nami",18,"航海士");
    pirate1.showInfo();
    var pirate2=new Pirate("robin",18,"历史学家");
    pirate2.showInfo();
    //验证几个结论
    alert(pirate1.showInfo==pirate2.showInfo);//true
    alert(pirate1.constructor==Pirate);//true
    alert(pirate2.__proto__==Pirate.prototype);//true
    </script>
    </body>
    </html>

    五、原型链

    1、老师代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>原型链</title>
    <!--
    01.一个原型对象是另一个原型对象的实例
    02.相关的原型对象层层递进,就构成了实例和原型的链条,我们称之为 原型链!
    -->
    </head>
    <body>

    <script type="text/javascript">
    //创建动物的构造函数
    function Animal(){
    }
    Animal.prototype.name="动物";
    //所有动物的睡觉方法
    Animal.prototype.sleep=function(){
    alert("动物在睡觉。。。");
    }



    //创建小狗的构造函数
    function Dog(){
    //如果产生了关系,就类似于java中的继承!
    }
    Dog.prototype.name="小狗";
    //小狗睡觉的方法
    Dog.prototype.sleep=function(){
    alert("小狗在睡觉。。。");
    }

    /**
    * 现在动物和小狗没有关系! 怎么让他俩有关系(原型-动物和实例-小狗)
    * 01.Dog是一个函数
    * 02.这个函数中有一个prototype属性
    * 03.需要让prototype属性指向Animal
    */
    Dog.prototype=new Animal(); //Dog的原型对象是Animal原型对象的实例!产生关系!

    //创建小狗对象
    var dog=new Dog();
    alert(dog.name); // 需要观察Dog中是否存在name属性! name属性是不是通过 函数名称.prototype.出来的!
    //dog.sleep(); 输出的是动物在睡觉


    </script>


    </body>
    </html>

    2、自己代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>原型链</title>
    </head>
    <body>
    <script type="text/javascript">

    //创建城市的构造函数
    function City(){
    }
    //城市的属性
    City.prototype.name="城市";
    //所有城市的盖楼方法
    City.prototype.buildHouse=function(){
    alert("城市在建高楼。。。。。。");
    }

    //创建北京的构造函数
    function Beijing(){
    }
    //北京的属性
    Beijing.prototype.name="北京";
    //北京的盖楼方法
    Beijing.prototype.buildHouse=function(){
    alert("北京在建高楼。。。。。。");
    }
    /**
    * 现在城市和北京没有关系! 怎么让他俩有关系(原型-城市和实例-北京)
    * 01.Beijng是一个函数
    * 02.这个函数中有一个prototype属性
    * 03.需要让prototype属性指向City
    */
    Beijing.prototype=new City();//Beijing的原型对象是City原型对象的实例!产生关系!
    //创建北京对象
    var beijing=new Beijing();
    alert(beijing.name);//输出的是“城市” 需要观察Beijing中是否存在name属性!name属性是不是通过函数名称.prototype.出来的!
    beijing.buildHouse();//输出的是“城市在建高楼。。。。。。”

    </script>
    </body>
    </html>

    六、作业

    1、练习今天老师讲的内容

    2、看完MySQL

    七、老师辛苦了!

  • 相关阅读:
    451. Sort Characters By Frequency
    424. Longest Repeating Character Replacement
    68. Text Justification
    44. Wildcard Matching
    160. Intersection of Two Linked Lists
    24. Swap Nodes in Pairs
    93. 递归实现组合型枚举
    98. 分形之城
    97. 约数之和
    96. 奇怪的汉诺塔
  • 原文地址:https://www.cnblogs.com/wsnedved2017/p/7061283.html
Copyright © 2011-2022 走看看