• 技术文章 >web前端 >js教程

    javascript之面向对象编程之属性继承

    巴扎黑巴扎黑2016-11-25 11:00:20原创611
    在JavaScript中,没有继承关键字: extends。那么,它是通过哪些方法,在用构造函数生成对象时,把对象基于另外一个构造函数,进行属性的生成(继承/拷贝)的呢? 即:对一个函数使用 new 关键字生成对象时,其对象的属性,可以来自于其它函数。

    本文提供两种写法:

    第一种(非正式):
    但需要理解这种用法。

    Javascript代码

    function Animal (name, age){

    this.name = name;

    this.age = age;

    }

    function Dog (name, age){

    this.i = Animal;

    this.i(name, age);

    }

    d = new Dog('hello',20);

    console.log(d);

    /*

    Dog {name: "hello", age: 20}

    age: 20

    i: function Animal(name, age)

    name: "hello"

    __proto__:

    constructor: function Dog(name, age)

    */


    上面一种写法是引用外部函数 Animal 作为自己的一个内部成员函数。
    这是一种匿名函数的写法。

    相当于:

    Javascript代码

    function Dog (name, age){

    this.i = function Animal (name, age){

    this.name = name;

    this.age = age;

    }

    this.i(name, age);

    }



    相当于:

    Javascript代码

    function Dog (name, age){

    /*

    When calling a function, instead of using the 'new' keyword to create

    object,

    // Calling a function

    Animal();

    //Using the 'new' keyword to create object.

    new Animal();

    The inner 'this' is the same one of the outer 'this'. Because

    there is no 'this' object created inside of the function, so it has to

    refer to the outer one.

    */

    this.i = function (name, age){

    this.name = name; // 2. so the inner "this" is the same

    this.age = age; // one of the outer "this".

    }

    this.i(name, age); // 1. function call, no 'this' created.

    }



    思考:调用函数时,"this"是谁??
    既然,函数调用不生成 "this" 对象。
    那么直接在 Dog 内调用 Animal 不可以吗?
    答案:否

    Java代码

    /*

    Which 'this' the called function belongs to, the inner 'this' inside of

    the called function refers to that 'this' object.

    */

    function Dog (name, age){ // if call Animal directly,

    Animal(name,age); // the Animal function here belongs to 'window',

    } // so 'this' inside of Animal refers to 'window'





    第二种(正式):
    使用 apply() 函数 或 call() 函数

    apply() : apply "this" object to the(that) function, then call it.

    Javascript代码

    function Animal (name, age){

    this.name = name;

    this.age = age;

    }

    function Dog (name, age){

    Animal.apply(this, arguments); // apply "this" object to Animal function.

    // or

    // call Animal function with a given 'this'

    // object, instead of referring to other 'this'.

    }

    d = new Dog('hello',20);

    console.log(d);

    /*

    Dog {name: "hello", age: 20}

    age: 20

    name: "hello"

    __proto__:

    constructor: function Dog(name, age)

    */

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:在 JavaScript 实现多播事件、属性设置/读取器 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 浅析Angular中的Change Detection机制• 一文详解多版本node的安装和管理• Angular学习之聊聊Http ( 错误处理 / 请求拦截 )• 浅析Angular变更检测中的订阅异步事件• 一文聊聊node中的path模块
    1/1

    PHP中文网