一次性弄懂工厂函数、构造函数、原型继承、组合继承

一次性弄懂工厂函数、构造函数、原型继承、组合继承

话不多说 上代码

一、 工厂模式
首先学习死记硬背我觉得没有啥用 需要去理解
先来看一段代码 你就应该知道什么是工厂模式
我将代码贴到下面,如果需要可以自行复制
我将代码贴到下面,如果需要可以自行复制
function Human(n,a,s){
var obj = {} // 原材料
// 对原材料进行以下再加工
obj.name = n
obj.age = a
obj.sex = s
obj.Sayhi = function(){
console.log(‘hi’);
}
return obj // 出厂
}
var person1 = Human(‘小明’,17,‘男’) //批量生产ing
var person2 = Human(‘小红’,18,‘男’) //批量生产ing

console.log(person1); 
console.log(person2); //   person1 person2都是 实例对象 会拥有原型上的方法属性
// 顾名思义 工厂模式就是能快速生产一些具有相同属性对象的函数 避面重复写一些代码

console.log(person1.Sayhi===person2.Sayhi); //false
// 从这个比较结果得出 他们的方法并不是同一个方法 而是创建了很多方法 这样明显是不合适的 数量多时也比较浪费内存和性能

二、 构造函数
在这里插入图片描述
// 任意一个函数通过new调用 用于创建某一个类型的对象
// String Number Array Boolean Object Date Regexp
// 共同特点就是首字母大写
// js中允许自定义构造函数
// 构造函数是一种内置的工厂函数

function Human(n,a,s){
  // 对比工厂函数 他没有原材料 也没有return 实际是new时 已经帮我们做了以下这些操作
  // this -> 实例对象
  // var this = {}  // new调用时就完成了
  this.name = n
  this.age = a
  this.sex = s
  this.sayHi = function(){
    console.log('hi');
  }
  // new调用时自动完成
  // return this
}

var person1 = new Human('小明',17,'男') 
var person2 = new Human('小红',18,'男') 


console.log(person1); // 实例化对象
console.log(person2); // 实例化对象
console.log(person1.constructor); // Human
console.log(person2.constructor); // Human
console.log(person1.sayHi===person2.sayHi); //false
// 从这个比较结果得出 他们的方法并不是同一个方法 而是创建了很多方法 这样明显是不合适的 数量多时也比较浪费内存和性能

三、 原型继承
在这里插入图片描述
// prototype
// 每一个函数对象都有一个prototype原型 指向一个对象 (原型对象)
// constructor 所有对象的constructor属性返回创建这个对象的构造函数(类)对象的类型识别
console.log(Human.prototype.constructor); //ƒ Human(){}
console.log(Human=Human.prototype.constructor); // true
function Human(){
}
console.log(Human.prototype.constructor); //ƒ Human(){}
console.log(Human
=Human.prototype.constructor); // true

// 给human添加一些方法和属性
Human.prototype.method1 = function(){
  console.log('方法1');
}
Human.prototype.method2 = function(){
  console.log('方法2');
}
Human.prototype.person1 = '老王'
Human.prototype.girlfriend = '马某'
Human.prototype.person2 = '宋吉吉'

var wang = new Human()
var song = new Human() 

console.log(wang); //此时 王的女朋友是马某
console.log(song); // song的女朋友也是马某 
// 这不对劲 所以原型继承有个缺点 就是属性值没有办法设置
console.log(wang.constructor); // Human
console.log(song.constructor); // Human

// 4、 组合继承
![在这里插入图片描述](https://img-blog.csdnimg.cn/b8a6c1fd211b4bc8984156792e1cd5b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA54ix55Sf5rS754ix5pWy5Luj56CB,size_20,color_FFFFFF,t_70,g_se,x_16)

// 顾名思义 利用构造函数继承和原型继承 
// 解决 1、属性值没有办法设置  2、方法会重复创建 浪费性能内存

function Human(n,a,s){
  this.name = n
  this.age = a
  this.sex = s
}

Human.prototype.sayHi = function(){
  console.log('hi');
}

var person1 = new Human('小红',11,'男')
var person2 = new Human('小黑',1,'女')

console.log(person1);
console.log(person2); 
console.log(person1.sayHi===person2.sayHi) // true 
// 这个打印结果表示打印出来的person1和person2都是用的原型对象上的sayhi方法没有去创建新的方法
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值