美文网首页知了·IT模式js笔记
js笔记三十六之原型链模式扩展(3)

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

作者: uplyw | 来源:发表于2018-06-01 21:15 被阅读4次

for in 循环在遍历的时候, 默认的话可以吧自己的私有的和在它所属类原型上扩展的属性和方法都可以遍历到, 但是一般情况下, 我们遍历一个对象只需要遍历私有的即可, 我们可以使用一下的判断进行处理

Object.prototype.aaa = function(){};

var obj = {name:"lilei",age:18}
for(var key in obj){
    // if(obj.propertyIsEnumerable(key)){
    //     console.log(key)
    // }
    
    if(obj.hasOwnProperty(key)){
        console.log(key)
    }
}

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象

Object.create()

var obj = {
    constructor: Fn,
    getX: function(){
        
    }
};
function Fn(){
    
}
Fn.prototype = obj;
Fn.prototype.sum = function(){
    
}

Object.create()创建一个新的对象, 但是还要把proObj作为这个对象的原型(ie6~8不支持[ECMAscript5])

var obj = {
    getX : function (){
        
    }
};
var obj2 = Object.create(obj)
// obj2:
// __proto__:
//  getX:function...
//  __proto__:Object.prototype
obj2.getX();
obj.getY = function (){
    console.log("ok");
}
obj2.getY() // -> ok
function object(obj){
    function Fn(){
        
    }
    Fn.prototype = obj;
    return new Fn;
}

原型继承

// #div1.__proto__ -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> EventTarget.prototype -> Object.prototype

function myObject(){
    
}
myObject.prototype = {
    constructor: myObject,
    hasOwnproperty: function(){
        
    }
};
function myEventTarget(){
    
}
myEventTarget.prototype = new myObject();
myEventTarget.prototype.addEventListener=function(){
    
}
function myNode(){
    
};
myNode.prototype=new myEventTarget;
myNode.prototype.createElement=function(){
    
}
var n =new myNode;
function A(){
    this.x=100;
}
A.prototype.getX=function(){
    console.log(this.x);
}
function B(){
    this.y=200;
}
B.prototype=new A;

原型继承是js中最常用的一种继承方式
子类B想要继承父类A中的所有的属性和方法(私有和公有),只需要让B.prototype=new A;即可
原型继承的特点: 它是把父类中的私有的+公有的都继承到了子类原型上(子类公有的)
->核心: 原型继承并不是把父类中的属性和方法克隆一份一模一样的给B,而是让B和A之间增加了原型链的连接,以后B的实例n想要用A中的的getX方法,需要一级级的向上查找来使用

call继承

function A(){
    this.x = 100;
}
A.prototype.getX = function(){
    console.log(this.x);
};

function B(){
    // this -> n
    A.call(this);  // -> A.call(n) 把A执行让A中的this变为了n
}
var n = new B;
console.log(n.x) // 100

call继承: 把父类私有的属性和方法 克隆一份一模一样的作为子类私有的属性;

冒充对象继承

function A(){
    this.x = 100;
}
A.prototype.getX = function(){
    console.log(this.x);
};

function B(){
    // this -> n
    var temp = new A; // 创建A对象的实例
    for(var key in temp){
        // console.log()
        this[key] = temp[key];
    }
    tamp = null
}
var n = new B;
console.log(n.x) // 100

冒充对象继承: 把父类私有的+公有的克隆一份一模一样的给子类私有的

混合模式继承

function A(){
    this.x = 100;
}
A.prototype.getX = function(){
    console.log(this.x);
};

function B(){
    A.call(this); // -> n.x = 100;
}

B.prototype = new A; // -> B.prototype: x= 100  getX...
B.prototype.constructor = B;
var n = new B;
console.log(n.x) // 100

混合模式继承: 原型继承 + call继承

寄生组合式继承

function A(){
    this.x = 100;
}
A.prototype.getX = function(){
    console.log(this.x);
};

function B(){
    A.call(this);
}

// B.prototype = Object.create(A.prototype);
B.prototype = objectCreate(A.prototype);
B.prototype.constructor = B;
var n = new B;
console.dir(n);

function objectCreate(o){
    function fn(){
    
    }
    fn.prototype = o;
}

中间类继承法(不兼容)

// 求平均数

function avgFn(){
    Array.prototype.sort.call(arguments,function(a,b){
        return a-b;
    });
    Array.prototype.pop.call(arguments);
    Array.prototype.shift.call(arguments);
    return (eval(Array.prototype.join.call(arguments,"+")) / arguments.length).toFixed(2);
}
console.log(avgFn(1,2,21,3,43,12,563,2,54))
// 求平均数

function avgFn(){
    arguments.__proto__ = Array.prototype;
    arguments.sort(function(a,b){
        return a-b;
    });
    arguments.pop();
    arguments.shift();
    return (eval(arguments.join("+")) / arguments.length).toFixed(2);
}
console.log(avgFn(1,2,21,3,43,12,563,2,54))

相关文章

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

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

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

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

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

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

  • js集成

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

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • js 集成模式 07-24

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

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

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

  • 廖雪峰JS小记

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

  • 设计模式三十六计之原型模式(Prototype)

    设计模式三十六计之原型模式(Prototype) 1. 设计思想 将一个对象作为指定的原型实例,并通过克隆此原型来...

  • JS原型链模式

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

网友评论

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

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