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 实现自动推送

更多精彩详见:个人主页

相关推荐
旧林84325 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq37 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css