• JS面向对象编程的实现


    先从问题说起

    今天脑袋短路,有种有这么一种问题困扰我:

        let Computer = function () {
            this.computerValue  = 'computerValue';
        };
        Computer.prototype.fun = function () {
            console.log('calculate');
        };
        let mac = new Computer();
        mac.fun = 1;
        let acer = new Computer();
        console.log(acer.fun); //为什么acer的fun不是1

    这个问题问的真愚蠢!但是却让我醒悟,长时间的使用框架与类库,导致JS的一些思想完全忘记了。

    从图中可以看出mac与acer都是Computer类的实例,当执行 mac.fun=1时实质上是在mac对象上新增一个fun属性。

    暂时下结论:实例无法修改原型链上的方法,只能继承使用(作用域链采取就近原则)先提示一下这个结论是错误的,看下面的例子:

        function Human() {
            this.name = 'parent'
        }
        Human.prototype.books = ['Css', 'Js', 'Html'];
    
        var male = new Human();
        var female = new Human();
    
        male.books.push('Php');
        console.log(female.books); // ['Css', 'Js', 'Html', 'Php'];

    从上面可以看,执行 male.books.push('Php') 时, female.books也被改变了,这是为什么呢?下面上图:

    看出猫腻了么? 执行 male.books.push('Php') 实际上是直接操作原型对象上的books属性,这个操作并没有为male添加books属性。所以访问female.books也就是原型对象上的books。
    总结:在操作实例对象instance的原型属性property时,如果你使用instance.property= express,相当于给实例本身新增加一个property属性,并没有改变原型对象的property的属性。如果你没有使用=进行辅助而是改变instance.property的值,那么相当于你改变了原型对象的property属性值。

    所以原型对象上一般存放方法,修改方法是通常是使用 = 进行赋值,这样就不会改变原型对象了。

  • 相关阅读:
    关于Java中String类的hashCode方法
    重写equal()时为什么也得重写hashCode()之深度解读equal方法与hashCode方法渊源
    vue+eslint+prettier+vetur 使用vscode 前端工程化
    vue webpack 打包优化
    移动端兼容
    vue 跨域使用
    vue2.0性能优化
    前端 mock的使用
    vue 使用Lodash 的throttle(节流)与debounce(防抖
    webpack4 安装及使用
  • 原文地址:https://www.cnblogs.com/noper/p/6770609.html
Copyright © 2020-2023  润新知