JS设计模式:安全类 继承 多继承 多态

前端之家收集整理的这篇文章主要介绍了JS设计模式:安全类 继承 多继承 多态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

安全类

var Book = function() {
    if(this instanceof Book) {
        this.title = title;
        this.time = time;
        this.type = type;
    } else {
        return new Book(title,time,type);
    }
}

继承

类式继承

function SuperClass() {
    this.books = ['JS','html','css'];
}

function SubClass() {}

Subclass.prototype = new SuperClass();

var instance1 = new SubClass();
var instance2 = new SubClass();
console.log(instance2.books);
instance1.books.push('xiaoming');
console.log(instance2.books);

console.log(SubClass.prototype instanceof SuperClass);

instance1的一个有意无意修改就破坏了instance2的book属性

//Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function(x,y) {
this.x += x;
this.y += y;
console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1,1); //Outputs,"Shape moved."

组合式继承

类式继承与构造函数继承的组合

function SuperClass(name) {
    this.name = name;
    this.books = ['JS','css'];
}

SuperClass.prototype.getName = function() {
console.log(this.name);
}

function SubClass(name,time) {
SuperClass.call(this,name);
this.time = time;
}

SubClass.prototype = new SuperClass();
SubClass.prototype.getTime = function() {
console.log(this.time);
};

var instance1 = new SubClass('js book',2014);
instance1.books.push('xiaoming');
instance1.getTime();
instance1.getName();
var instance2 = new SubClass('css book',2013);
console.log(instance2.books);
instance2.getTime();
instance2.getName();

子类构造函数中执行父类构造函数, 在子类原型上实例化父类就是组合模式。(prototype中的相同属性被覆盖掉了,因为实例先从自身的属性找。)

纯净式继承

var inheritPrototype = function(parent,child) {
    var F = function() {};
    F.prototype = parent.prototype;
    child.prototype = new F();
    child.prototype.constructor = child;
}

多继承

var inheritPrototype = function(parent,child) {
    var F = function() {};
    F.prototype = parent.prototype;
    child.prototype = new F();
    child.prototype.constructor = child;
}

function SuperClass(name) {
this.name = name;
this.books = ['JS','css'];
}
SuperClass.prototype.getName = function() {
console.log(this.name);
}

function SubClass(name,time) {
this.time = time;
}
inheritPrototype(SuperClass,SubClass);
var instance1 = new SuperClass('js book',2014);
var instance2 = new SubClass('js book',2014);

console.log('test...')
for(var property in SuperClass) {
console.log(property); // ^-^Nothing (SuperClass当前只是一个构造函数)
}

for(var property in instance1) {
console.log(property); // name books getName (原型上的也包括
}

for(var property in instance2) {
console.log(property); // time constructor getName (constructor更改过就显示,否则默认不显示
}

var extend = function(target,source) {
    for (var property in source) {
        target[property] = source[property];
    }
    return target;
}

原型继承

var Person = function(name,work) {
    var _person = new Human();
    _person.name = new Named(name);
    _person.work = new Work(work);
    this = _person;
}

var person = new Person('xiaoming','code');

实例间的 继承。

多态

function Add() {
    function zero() {
        return 10;
    }
function one(num) {
    return 10 + num;
}

function two(num1,num2) {
    return num1 + num2;
}

this.add = function() {
    var arg = arguments,len = arg.length;

    switch(len) {
        case 0:
            return zero();
        case 1:
            return one(arg);
        case 2:
            return two(arg[0],arg[1]);
    }
}

}

原文链接:https://www.f2er.com/note/421711.html

猜你在找的程序笔记相关文章