javascript 原型链和闭包问题

查看:113
本文介绍了javascript 原型链和闭包问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

    function Person(first, last) {
        var fName = first;
        var lName = last;

        function firstName(first) {
            return first ? (fName = first) : fName;
        };

        function lastName(last) {
            return last ? (lName = last) : lName;
        };

        return {
            firstName: firstName,
            lastName: lastName
        }
    }
    Person.prototype = {
        show: function() {
            console.log("show");
        }
    }

    var person = new Person("michael", "jackson");
    console.log(person);

    function Book(name, author) {
        this.name = name;
        this.author = author;
    };
    Book.prototype = {
        show: function() {
            console.log("show");
        }
    }
    var book = new Book("java", "me");
    console.log(book);

代码如上图,Person类我使用闭包的方式创建实现private,Book类使用原型的方式创建,当我在给原型添加方法的时候,为什么Person类添加不了,Book类就可以添加成功

解决方案

当代码 new foo(...) 执行时:

  1. 一个新对象被创建。它继承自foo.prototype.

  2. 构造函数 foo 被执行。执行的时候,相应的传参会被传入,同时上下文(this)会被指定为这个新实例。new foo 等同于 new foo(), 只能用在不传递任何参数的情况。

  3. 如果构造函数返回了一个对象,那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象,ps:一般情况下构造函数不返回任何值,不过用户如果想覆盖这个返回值,可以自己选择返回一个普通对象来覆盖。当然,返回数组也会覆盖,因为数组也是对象。

综上所述,以你的代码为例:

    function Person(first, last) {
        var fName = first;
        var lName = last;

        function firstName(first) {
            return first ? (fName = first) : fName;
        };

        function lastName(last) {
            return last ? (lName = last) : lName;
        };

        return {
            firstName: firstName,
            lastName: lastName
        }
    }
    Person.prototype = {
        show: function() {
            console.log("show");
        }
    }

下面这行代码发生了三件事情:

new Person("michael", "jackson"); //等同于下面的代码
//**************************
var o = Object.create(Person.prototype); //对应上面的`1`
var other = Person.apply(o, ["michael", "jackson"]);//对象上面的`2`
return typeof other === 'object' ? other : o; //对应上面的`3`

很明显,new Person("michael", "jackson")的结果在第三步的时候已经被取代了

参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new

这篇关于javascript 原型链和闭包问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆