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

u=270444908,855133437&fm=253&fmt=auto&app=138&f=JPEG.avif

创建对象的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() } }

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值