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

更多精彩详见:个人主页

相关推荐
MickeyCV1 小时前
Nginx学习笔记:常用命令&端口占用报错解决&Nginx核心配置文件解读
前端·nginx
祈澈菇凉1 小时前
webpack和grunt以及gulp有什么不同?
前端·webpack·gulp
十步杀一人_千里不留行1 小时前
React Native 下拉选择组件首次点击失效问题的深入分析与解决
javascript·react native·react.js
zy0101011 小时前
HTML列表,表格和表单
前端·html
初辰ge1 小时前
【p-camera-h5】 一款开箱即用的H5相机插件,支持拍照、录像、动态水印与样式高度定制化。
前端·相机
HugeYLH2 小时前
解决npm问题:错误的代理设置
前端·npm·node.js
三天不学习2 小时前
Redis面试宝典【刷题系列】
数据库·redis·面试
六个点2 小时前
DNS与获取页面白屏时间
前端·面试·dns
道不尽世间的沧桑2 小时前
第9篇:插槽(Slots)的使用
前端·javascript·vue.js
bin91532 小时前
DeepSeek 助力 Vue 开发:打造丝滑的滑块(Slider)
前端·javascript·vue.js·前端框架·ecmascript·deepseek