js中的继承

变量提升：在js中可以允许变量先使用后声明。例如：

   x=5;
   var x;

函数相关概念：

函数声明：function add(){}

函数表达式：var add=function(){}

匿名函数：function(){}

创建一个对象：

1.对象的字面量创建 var o={}

2.new一个对象的实例 var o=new Object()

3.Object.create() var o=Object.create(Object.prototype);

工厂模式：

 function create(name,age,job){
     var o = new Object()
     o.name = name;
     o.age = age;
     o.job = job;
     o.sayName = function(){
         alert(this.name);
     }
     return o;
 }
 
 var p1 = create("nick",10,"web");
 p1.sayName()

构造函数模式：

function Create(name,age,job){
    this.name = name;
    this.age = age;
    this.job =  job;
    this.sayName = function(){
        alert(this.name);
    }
}

var p1 = new Create("nick",11,".net");
p1.sayName();

创建一个对象或实例需要经历的步骤：

1.创建一个对象；

2.将构造函数的作用域赋给新创建的对象；

3.执行构造函数的代码，（为新对象添加熟悉）；

4.返回新对象；

原型模式：

function Create(){}
Create.prototype.name = "nick";
Create.prototype.age = 11;
Create.prototype.job = "java";
Create.prototype.sayName = function(){
    alert(this.name);
}
var p1 = new Create();
p1.sayName();

var p2 = new Create();
p2.sayName();

isPrototypeOf() 检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中

hasOwnProperty() p2.hasOwnProperty("name") 判断p2是否包含name这个属性；

还可以用In ("name" in p2) //false

组合使用函数构造模式和原型模式：

function Create(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.color = ["red","bule"];
}
Create.prototype.sayName=function(){
    alert(this.name);
}
var p1 = new Create("nick",23,"js");
p1.color.push("abc");
console.log(p1.color);
p1.sayName();

var p2 = new Create("abc",11,"web");
console.log(p2.color);

动态原型模式：

function Create(name.age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName!="function"){
        Create.prototype.sayName(){
            alert(this.name);
        }
    }
}

var p2 = new Create("afda",33,"fdsa");
p2.sayName();

寄生构造函数模式：

function Create(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName=function(){
        alert(this.name);
    }
    return o;
}

var p1 = new Create("mrq",23,"abc");

稳妥构造函数模式：

稳妥对象，是指没有公共属性，而其方法也不引用this对象

特点：创建对象实例不引用this，不使用new操作符调用构造函数

function Create(name,age,job){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    }
    return o;
}
var p1 = Create("mrq",33,"afa");
p1.sayName();

继承：

原型链继承：

function SuperType(){
    this.pro=true;
}

SuperType.prototype.getSuperPro=function(){
    return this.pro;
}

function Subtype(){
    this.subpro=false;
}

Subtype.prototype = new SuperType();

Subtype.prototype.getsubpro=function(){
    return this.subpro;
}

var p1 = new Subtype();
console.log(p1.getSuperPro());

借用构造函数继承：

function Supertype(name){
    this.name = name;
}
function Subtype(){
    Supertype.call(this,"nick");
    this.age = 22;
}
var p1 = new Subtype();
alert(p1.name);
alert(p1.age);

组合继承：

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
};

function Subtype(name,age){
    SuperType.call(this,name);
    this.age = age;
}

Subtype.prototype = new SuperType();
Subtype.prototype.sayAge = function(){
   console.log(this.age);
};

var instance1 = new Subtype("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); // red, blue, green, black
instance1.sayName(); // Nicholas
instance1.sayAge(); //29

var instance2 = new Subtype("Greg", 2);
console.log(instance2.colors); // red, blue, green
instance2.sayName(); // Greg
instance2.sayAge(); //2

原型式继承：

function obj(o){
    function F(){}
    F.prototype = o;
    return new F();
}

var p1 = {
    name:"mrq",
    age:11;
}

var p2 = obj(p1);
alert(p2.name);

var p3 = obj(p1);
alert(p3.name);

其中原型式继承和Object.create()效果一样。都是返回一个函数的实例，Object.create()方法规范了原型式继承；

var o;

// 创建一个原型为null的空对象
o = Object.create(null);


o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype);


o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

寄生式继承：

寄生式继承实际上就是原型式继承+一个函数外壳，通过函数外壳内调用实现原型式继承的函数，然后再将一个新的变量指向返回一个对象的实例，再新的对象添加属于自己的函数，再返回这个函数。这里的寄生就是指的一个封装继承过程的函数，该函数内部用某种方法雷增强对象，最后返回这个被增强的对象。比如在这个函数内给被封装的对象添加一个属性或者方法；

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function createAnother(original){
    var clone = object(original);
    clone.sayHi = function(){
        alert('hi')
    };
    return clone;
}
var person = {
    name:"Nicholas",
    friends:["Shelby", "Court", "Van"]
}

var anotherPerson = createAnother(person);
anotherPerson.sayHi();

寄生组合式继承：

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType,superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function Subtype(name,age){
    SuperType.call(this,name);
    this.age = age;
}

inheritPrototype(Subtype, SuperType);

Subtype.prototype.sayAge = function(){
    console.log(this.age);
}

语言描述：

1.原型链继承：一个父类，一个子类，将子类的原型prototype指向父类的一个实例；

2.借用构造函数继承：在子类构造函数内部调用父类构造函数，通过父类.call(this,x)方式或者apply()

3.组合继承：将原型链，借用构造函数继承一起使用，通过原型链继承实现对原型属性和方法的继承，通过构造函数继承来实现对实例属性的继承；

4.原型式继承：在一个函数内部定义一个构造函数，将传入的对象作为这个构造函数的原型，最后返回一个新实例；

5.寄生式继承：创建一个用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。

posted @ 2019-03-26 08:36 清梦徐徐丶莫阅读(172) 评论(0) 编辑收藏举报

刷新页面返回顶部

清梦徐徐丶莫

闭关修炼，厚薄积发。

js中的继承

公告