美文网首页让前端飞知了·IT模式
js笔记三十五之原型链模式扩展(2)

js笔记三十五之原型链模式扩展(2)

作者: uplyw | 来源:发表于2018-05-31 23:12 被阅读2次

在原型模式中,this常用的有两种情况:

  1. 在类中 this.xxx=xxx; this -> 当前类的实例
  2. 某一个方法中的this -> 看执行的时候 . 前面是谁this就是谁
    1. 需要先确定this的指向(this是谁);
    2. 把this替换成对应的代码
    3. 按照原型链查找机制, 一步步的查找结果
function Fn(){
    this.x = 100;
    this.y = 200;
}
Fn.prototype = {
    constructor: Fn,
    y: 300,
    getX: function(){
        console.log(this.x)
    },
    getY: function(){
        console.log(this.y)
    }
}
var f = new Fn;
f.getX() // -> 100  => console.log(f.x) => 100
f.__proto__.getX() // -> undefined  => this是f.__proto__ => console.log(f.__proto__.x)[忽略私有,直接找原型] => undefined
Fn.prototype.getX(); // -> undefined
f.getY(); // -> 200
f.__proto__getY() // -> 300
// 在内置类的原型上扩展数组去重方法
Array.prototype.myUnique = function(){
    // this -> 
    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;
    }
    obj = null;
    return this; // 目的是为了实现链式写法
}
var ary = [12,23,23,13,12,13,23,13,12];
ary.myUnique();
console.log(ary)
// Array.prototype.myUnique() // -> this -> Array.prototype

链式写法: 执行完成数组的一个方法可以紧接着执行下一个方法
ary为什么可以使用sort方法? -> 因为sort是Array.prototype上的公有的方法,而数组ary是Array这个类的一个实例,所以ary可以使用sort方法 -> 数组才能使用Array原型上定义的属性和方法
sort执行完成的返回值是一个排序后的数组,可以继续执行reverse
reverse执行完成的返回值是一个数组,可以继续执行pop
pop执行完成的返回值是一个被删除的那个元素

ary.sort(function(a,b){
    return a-b;
}).reverse().pop();

思考练习:

在数组的原则上有一个方法叫做slice, 自己实现一个方法mySlice, 要求和原来的slice功能一模一样

Array.prototype.mySlice = function(){
    // js code...
}

考虑情况:
slice(n,m)
slice(n)
slice()
n和m是负数
n<m
n和m的值超过数组的长度
n和m不是有效数字
...

相关文章

  • js笔记三十五之原型链模式扩展(2)

    在原型模式中,this常用的有两种情况: 在类中 this.xxx=xxx; this -> 当前类的实例 某一个...

  • js笔记三十六之原型链模式扩展(3)

    for in 循环在遍历的时候, 默认的话可以吧自己的私有的和在它所属类原型上扩展的属性和方法都可以遍历到, 但是...

  • js笔记三十四之原型链模式扩展(1)

    原型链模式扩展 批量设置原型上的公有属性 起一个别名 重构原型对象的方式 -> 自己新开辟一个堆内存,存储我们共...

  • js集成

    原始继承模式--原型链 2:借用构造函数 3:共享构造原型 4:圣杯模式原型链; 构造函数; 共享原型; 圣杯模式...

  • 原型链模式--扩展2(继承)

    1、for in循环在遍历的时候,默认是可以把自己私有的和所属类原型(prototype)上扩展的属性和方法都可以...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • js 集成模式 07-24

    **原始继承模式--原型链 2:借用构造函数 3:共享构造原型 4:圣杯模式**一:原型链; 二:构造函数; 三:...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • JS原型链模式

    构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立开的即实例识别。基于函数的原型模式解决了方法和属性...

  • 原型链模式--扩展1

    批量设置原型上的公有属性和方法: 1、起一个别名(简单): var pro=Fn.prototype;把原来原型指...

网友评论

    本文标题:js笔记三十五之原型链模式扩展(2)

    本文链接:https://www.haomeiwen.com/subject/evgcsftx.html