• js原型链部分详细使用说明案例


    1. 'index.html'文件

    ```html

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>js原型讲解</title>

    </head>

    <body>

    <script src='js/person.js'></script>

    <script src='js/student.js'></script>

    <script src='js/coder.js'></script>

    <script>

    var person = new Person('Jack',18,'男');

    person.sleep();

    person.dating();

    person.eat('蛋炒饭');

    person.birthday();

    /////student实例化对象

    /***

    * 实例化后的对象在查找属性或者方法的时候

    * 首先在 this 自己内部查找

    * 如果没有找到 就会到原型中查找

    * 如果原型中没有,那么就会去原型的原型继续查找

    * ...

    * 直到找到为止 如果没有找到那么返回undefined或者报错

    */

    var student = new Student('小明',15,'男','县一中');

    console.dir(student);

    student.sleep();

    student.dating();

    student.eat('蛋炒饭');

    student.birthday();

    student.goSchool();

    var coder = new Coder('Jerry',25,'男','MS');

    coder.sleep();

    coder.work();

    console.log(coder);

    </script>

    </body>

    </html>

    ```

    2. 'js/person.js'文件

    ```javascript

    /****

    * 定义一个Person对象

    * 包含 name age gender 三个属性

    */

    function Person(name, age,gender) {

    this.name = name;

    this.age = age;

    this.gender = gender;

    }

    ////Person的原型

    Person.prototype = {

    /////睡觉

    sleep:function(){

    console.log(this.name + '每天睡觉八小时');

    },

    ////吃饭 传入参数food

    eat:function(food){

    console.log(this.name+'特别爱吃'+food);

    },

    ////不需要参数

    dating:function(){

    console.log('单身狗');

    },

    ////出生年份,根据年龄计算 不需要参数

    birthday:function(){

    var birthYear = (new Date()).getFullYear()-this.age;

    console.log(this.name+'的出生在'+birthYear+'年');

    }

    }

    ```

    3. 'js/student.js'文件

    ```javascript

    function Student(name,age,gender,school){

    this.school = school;

    Person.apply(this,[name,age,gender]);

    }

    // function EmptyFun(){}

    // ///设置空对象的原型为Person的原型

    // EmptyFun.prototype = Person.prototype;

    // var temEmptyFun = new EmptyFun(); ////实例化的一个空对象

    // Student.prototype = temEmptyFun; ///设置学生的原型为实例化的空对象

    // Student.prototype.constructor = Person

    //Object.create()可以通过你提供的原型创建一个新对象,

    //这个新对象的原型就是create()的第一个参数

    Student.prototype = Object.create(Person.prototype);

    Student.prototype.constructor = Student

    ////为学生原型定义一个方法 goSchool

    Student.prototype.goSchool = function(){

    console.log(this.name + '每天早上八点准时去'+this.school);

    }



    /////为学生创建一个dating方法

    Student.prototype.dating = function(){

    console.log('学校禁止早恋!');

    }

    ```

    4. 'js/coder.js'文件

    ```javascript

    function Coder(name,age,gender,company){

      Student.apply(this,[name,age,gender,company]);

    }

    Coder.prototype = Object.create(Student.prototype);

    Coder.prototype.work = function(){

      console.log('writing code ....../n fix bugs');

    }

    ```

    看的故事多了,才慢慢知道,话说多了就是打自己的脸!
  • 相关阅读:
    (转)NandFlash详述
    (转)Redhat Linux 硬盘挂载方法!!!
    为Linux虚拟机挂载SD卡!
    DECLARE_GLOBAL_DATA_PTR 作用
    NAND FLASH ECC校验原理与实现
    Ehcache学习笔记(三) 与Spring集成
    ExtJs ComponentQuery 组件选择器
    好记性不如烂博客之 Quartz HowTo: Update an existing job
    使用WeakReference 与 ReferenceQueue 简单实现弱引用缓存
    Ehcache学习笔记(四) Web Caching 页面级别缓存
  • 原文地址:https://www.cnblogs.com/alex-415/p/6843906.html
Copyright © 2020-2023  润新知