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

创建对象的6种方式

  1. new Object() 缺点:步骤多
  2. 字面量:var 对象名={} 缺点:如果反复创建多个对象,代码会冗余。
  3. 工厂函数方式:
js 复制代码
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. 原型链式继承:将父类的实例作为子类的原型。

js 复制代码
// 定义一个夫类型
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. 构造函数继承:

js 复制代码
// 定义一个夫类型
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. 实例继承:

js 复制代码
// 定义一个夫类型
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 遍历的方法。

js 复制代码
// 定义一个夫类型
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. 组合继承:

js 复制代码
// 定义一个夫类型
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. 寄生组合继承:

js 复制代码
// 定义一个夫类型
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 继承

js 复制代码
Class 父类型{
    constructor(){}
    ...
}
class 子类型 extends 父类型{
    constructor(){
        super()
    }
}

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

往期热门精彩推荐

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见:个人主页

相关推荐
奇舞精选24 分钟前
在 Chrome 浏览器里获取用户真实硬件信息的方法
前端·chrome
热忱11281 小时前
elementUI Table组件实现表头吸顶效果
前端·vue.js·elementui
林涧泣2 小时前
【Uniapp-Vue3】setTabBar设置TabBar和下拉刷新API
前端
翻晒时光2 小时前
Java 多线程与并发:春招面试核心知识
java·jvm·面试
Rhys..2 小时前
Jenkins pipline怎么设置定时跑脚本
运维·前端·jenkins
Like_wen2 小时前
【Go面试】工作经验篇 (持续整合)
java·后端·面试·golang·gin·复习
易林示2 小时前
chrome小插件:长图片等分切割
前端·chrome
翻晒时光2 小时前
探秘 Java IO 与 NIO:春招面试知识要点
java·面试·nio
w(゚Д゚)w吓洗宝宝了2 小时前
单例模式 - 单例模式的实现与应用
开发语言·javascript·单例模式
zhaocarbon2 小时前
VUE elTree 无子级 隐藏展开图标
前端·javascript·vue.js