16-原型链模式拓展

作者: Young_Blood | 来源:发表于2016-08-09 10:47 被阅读10次

16-原型链模式拓展
原型链模式-拓展
js集成
js 集成模式 07-24
2019-08-05 拓展现有函数
继承大法好
原型和原型链篇
JS中4 个用于拓展原型链的方法比较
js面向对象的几种写法
继承（个人学习笔记）

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>原型链模式(拓展-this和原型扩展)</title> 
 </head> 
 <body> 
  <script type="text/javascript">
        // 在原型模式中,this有两种情况:
        // 在类中 this.xxx = xxx ; this 就是当前类的实例
        // 某一个方法中的this->看执行的时候"."前面是谁 this 是谁
        // 1>需要先确定this的指向 (this是谁)
        // 2>把this换成对应的代码
        // 3>按照原型链查找的机制
        function Fn() {
            this.x = 100;
            this.y = 200;
            this.getY = function () {
                console.log(this.y);
            }
        }
        Fn.prototype = {
            constructor :Fn,
            y:300,
            getX:function () {
                console.log(this.x); // this-> f
            },
            getY:function () {
                console.log(this.y);
            }
        };
        var f = new Fn;
        f.getX(); // console.log(f.x) 100;
        f.__proto__.getX(); // this是 f.__proto  -> console.log(f.__proto__.x); undefined
        Fn.prototype.getX(); // Fn.prototype.getX() -> undefined
        f.getY(); // 200 找私有的
        f.__proto__.getY(); // 300 找共有的


        // 在内置类的圆形上拓展我们的方法
        Array.prototype.myUnique = function () {
            // this -> ary
            // 数组去重
            var obj = {};
            for (var i = 0; i < this.length;i++) {
                var cur = this[i];
                if (obj[cur] == cur) {
                    this[i] = this[this.length -1];
                    this.length--;
                    i--;
                    continue;
                }
                obj[cur] = cur;
            }
        }
        var ary = [];
        ary.myUnique(); // ary
//        ary.__proto__.myUnique(); IE下屏蔽
        Array.prototype.myUnique(); // this-> Array.prototype
        var ary = [12, 23, 23, 23, 13, 13, 14];
        ary.myUnique();
        console.log(ary);

        // 链式写法:执行完成数组的一个方法可以紧接着执行下一个方法
        // 原理:
        // ary为什么可以使用sort方法? 因为sort是Array.prototype上的,而数组是ary是Array这个类的一个实例,所以ary可以使用sort方法 数组才能使用array原型上的定义的属性和方法
        var ary2 = [12, 23, 23, 23, 13, 13, 14];
        // sort执行完成之后的返回值是一个排序后的"数组",可以继续执行reverse
        // reverse执行完成的返回值是一个数组,可以继续执行pop
        // pop执行完成的返回值是被删除的那个元素,不是一个数组了
        ary.sort(function (a,b) {
            return a - b ;
        }).reverse().pop();


    </script>  
 </body>
</html>