JS 中创建对象的6种方式，7中实现继承方式

创建对象的6种方式

1. new Object() 缺点：步骤多
2. 字面量：var 对象名={} 缺点：如果反复创建多个对象，代码会冗余。
3. 工厂函数方式：

function createPerson (name,age){
    var a = new Object()
    a.name = name
    a.age = age
    a.say = function(){alert(this.name)}
    return a
}
var b = createPerson('小王',18)
// 缺点: 本质还是 Object()Object()，将来无法根据对象的原型对象准确判断对象的类型

1. 构造函数方式：

   1. 先用构造函数定义一类对象的统一属性结构和方法。
   2. 再用new调用构造函数，反复创建相同属性结构，不同属性值的多个对象。
   3. 缺点：如果构造函数种包含方法，则重复创建浪费内存

2. 原型对象方式：先创建完全相同的对象，再给子对象添加个性化属性。 缺点：步骤繁琐。

3. class 模式

实现继承的7种方式

在介绍继承方式之前先来了解一下什么是继承吧。

为什么出现继承： 只要将方法定义放在构造函数中，那么每次 new 时都会执行 function，就会反复创建相同函数的多个副本浪费内存。

如果将来发现多个子对象都要使用相同的功能和属性值时，都可以用继承来解决。

什么是继承： 父对象中的成员，子对象无需重复创建，就可直接使用，就像使用自己的成员一样，this.属性名/方法名()。JS中继承都是通过原型对象实现的。

什么是原型对象 替所有子对象集中保存共有属性值和方法的父对象。

何时使用原型对象 只要发现多个子对象都需要使用相同的功能和属性值时，都可将相同的功能和属性值集中定义在原型对象中。

如何创建原型对象 不用自己创建，而是在定义构造函数时，程序自动附赠我们一个空的原型对象。

如何找到原型对象 构造函数中都有一个自带的属性 prototype,指向自己配对的原型对象。构造函数.prototype。

何时如何继承 不用自己设置继承关系，new的第一步自动让新创建的子对象继承构造函数的对象，new的第二步自动设置子对象的__proto__属性值，指向构造函数的原型对象。

如何向原型对象中添加共有属性

• 构造函数.prototype.属性名=属性值
• 构造函数.prototype.方法名=function(){}

1. 原型链式继承：将父类的实例作为子类的原型。

// 定义一个夫类型
function Animal (name) {
    this.name = name
    this.say = function(){console.log(this.name)}
}
// 原型对象方法
Animal.prototype.eat = function(food) {
    console,log(this.name + '正在吃：' + food)
}

function Cat() {}
Cat.prototype = new Animal()
Cat.prototype.name = 'cat'
var cat = new Cat()
// 缺点：创建子类实例时，无法向父类构造函数传参。

2. 构造函数继承：

// 定义一个夫类型
function Animal (name) {
    this.name = name
    this.say = function(){console.log(this.name)}
}
// 原型对象方法
Animal.prototype.eat = function(food) {
    console,log(this.name + '正在吃：' + food)
}

function Cat(name, age) {
    Animal.call(this，name)
    this.age = age
}
var cat = new Cat()

3. 实例继承：

// 定义一个夫类型
function Animal (name) {
    this.name = name
    this.say = function(){console.log(this.name)}
}
// 原型对象方法
Animal.prototype.eat = function(food) {
    console,log(this.name + '正在吃：' + food)
}

function Cat(name, age) {
    var a = new Animal(name) // 先创建子类型实例
    a.age = age
    return a
}
var cat = new Cat()

4. 拷贝继承：无法获取父类不可 for in 遍历的方法。

// 定义一个夫类型
function Animal (name) {
    this.name = name
    this.say = function(){console.log(this.name)}
}
// 原型对象方法
Animal.prototype.eat = function(food) {
    console,log(this.name + '正在吃：' + food)
}

function Cat(name, age) {
   var animal = new Animal(name)
   for(var p in animal){
      Cat.prototype[p] = animal[p]
   }
   this.age = age
}
var cat = new Cat()

5. 组合继承：

// 定义一个夫类型
function Animal (name) {
    this.name = name
    this.say = function(){console.log(this.name)}
}
// 原型对象方法
Animal.prototype.eat = function(food) {
    console,log(this.name + '正在吃：' + food)
}

function Cat(name, age) {
    Animal.call(this，name)
    this.age = age
}
Cat.prototype = new Animal()
Cat.prorotype.constructor = Cat;
var cat = new Cat()

6. 寄生组合继承：

// 定义一个夫类型
function Animal (name) {
    this.name = name
    this.say = function(){console.log(this.name)}
}
// 原型对象方法
Animal.prototype.eat = function(food) {
    console,log(this.name + '正在吃：' + food)
}

function Cat(name, age) {
    Animal.call(this，name)
    this.age = age
}
(function() { // 创建一个没有实例方法的类
    var Super = function(){}
    Super.prototype = Animal.prototype // 将实例作为子类的原型
    Cat.prototype = new Super()
})()
var cat = new Cat()

7. ES6 class extends 继承

Class 父类型{
    constructor(){}
    ...
}
class 子类型 extends 父类型{
    constructor(){
        super()
    }
}

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期热门精彩推荐

面试相关热门推荐

实战开发相关推荐

移动端相关推荐

Git 相关推荐