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+"\n年龄："+this.age+"\n工作："+this.job+"\n住址："+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+"\n"+"年龄:"+age+"\n"+"地址："+address);        }*/        this.showInfo=showInfo;    }    //全局作用域的方法  ！  让所有的对象共享这个方法的实例    function  showInfo(){        alert("姓名："+this.name+"\n"+"年龄:"+this.age+"\n"+"地址："+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+"\n年龄："+age+"\n职业："+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+"\n"+"年龄:"+this.age+"\n"+"地址："+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+"\n年龄："+age+"\n职业："+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

七、老师辛苦了！

转载于:https://www.cnblogs.com/wsnedved2017/p/7061283.html

2017年6月21号课堂笔记相关推荐

2017年4月21号课堂笔记
2017年4月21号星期五空气质量:良内容:XML,Dom4j解析XML文件,单例一.XML 老师代码: <?xml version="1.0" encoding=& ...
2017年4月5号课堂笔记
2017年4月5号晴轻度雾霾内容:Set,Map,遍历集合的方法,泛型,小Demo,Collections工具类的使用一.Set 老师代码: package cn.bdqn.test; imp ...
2017年5月5号课堂笔记
2017年5月5号星期五沙尘暴转晴内容:U2 HTML5第一节课一.01第一个霸气的网页 1.老师代码: <!DOCTYPE html><html><head l ...
2017年3月13号课堂笔记
2017年3月13号晴空气质量:优内容:双重循环,Java基础总结一.Double01(3个班级各4名学员参赛,求每个班的平均分) 1.老师代码: public class Double01 ...
2017年6月23号课堂笔记
2017年6月23号星期五暴雨转阵雨空气质量:良内容: 01jQuery-Validate验证插件的使用:02bootstrap小例子: 03引用charisma代码小例子一.jQuery- ...
2017年6月16号课堂笔记
2017年6月16号星期五空气质量:中度污染~轻度污染内容:jQuery:remove,bind,attr,on和live,同辈和父辈节点的操作, keyup/keypress/keydown, ...
2017年06月07号课堂笔记
2017年06月07号晴空气质量:中度污染->良内容:jQuery第二节:基本选择器,层次选择器,属性选择器, 基本过滤选择器,可见性过滤选择器备注:代课老师:李老师一.基本选择器 1 ...
2017年07月03号课堂笔记
2017年07月03号星期一多云空气质量:轻度污染~中度污染内容:MySQL第四节课 in和not in:两个表的内连接:exists和not exsits的使用:all,any和some: ...
2017年4月24号课堂笔记
2017年4月24号晴空气质量:中度污染内容:反射及相关,java设计六大原则(自学) 一.反射机制在程序运行期间,对于任何一个类,都能获得它的所有方法和属性! 对于任何一个对象,都能调 ...

2017年6月21号课堂笔记

2017年6月21号课堂笔记相关推荐

最新文章

热门文章