几种创造对象的方法方法 以及纠结的原型链

在前端学习中 ,我一直都是两个概念闹不明白;

1,闭包。(闭包是啥?为啥要用?怎么用?有些教程很好;而有些教程高深的机器的到望而生畏);

2,原型链。(啥是原型链?谁是谁的原型对象?谁是谁的?你是你的我是我的?还是我的是我的你的还是我的?*¥%……@#¥);

闭包是啥?

好吧,想了解闭包的同学请去我搬砖过来的文章,传送门:https://blog.csdn.net/wangrong111222/article/details/79938999

下面我们来进行消化一下原型链:

在此之前我要讨论讨论三种造对象的简单模式(我这个人喜欢简单点阐述道理,毕竟万物生于null; 手动滑稽 );

1,字面量模式(设计模式:单例模式)

var monkey={
   name:"wukong",
   eye:"fireGoldEyes",
   attack:function(){
    alert(this.name+"一棒造成了成吨的伤害") 
  }
}

好好好,我们用字面量模式造了一只猴子,这只猴子叫做孙悟空,并且带了火眼金睛;并且让他可以造成了成吨的伤害;

这种方式应该是我们最经常用的对象定义方式,也是比较推荐的定义方式,因为他比其他的方法更加运行效率高;而且清楚明了;

弊端 :每次都要写一个对象,伴随着需求增加到最后实际的会有成吨的对象,不够灵活,还不能量产;因此第二种方法就应运而生;

2, 工厂模式(设计模式:工厂模式)

function createObj(name,eye,attcak){
    var o=null;
      o.name=name;
      o.eye=eye;
      o.attack=attcak
   return o;
}

var monkey =createObj("wukong","fireGoldEyes",function(){
              alert(this.name+"一棒造成了成吨的伤害");
   		 })

这种模式叫做工厂模式;顾名思义 ,工厂流水线生产,可量产;这种模式的是解决了字面量模式的问题,可是有引申出了新的问题:我们虽然获得了很多的对象,但是对于这些个对象去追本溯源,无从找起;你可以理解为工厂老板没有为每一个产品写详细的记录(不负责任的老板);在某些我们希望去查找到并且从源头去修改属性的场景先得比较不给力;so,官方又给出了新的方法来补充;

3,构造函数  (设计模式:构造函数模式)

function Monkey(){
     this.name="wukong",
     this.eye="fireGoldEyes";
     this.attack=function(){
    
     alert(this.name+"一棒造成了成吨的伤害")
     }
};

var sunxingzhe=new Monkey();

jsz中构造函数的实现借鉴了其他oo语言模式的实现,函数名首字母大写,区别于js里其他的函数;在没有被new操作符之前 ;和其他的函数都是一样的一样的;new之后 ,就有了黑魔法可以造对象了;

比较工厂模式右以下不同:

1,没有显示的创建对象;

2;没有return 啥玩意出来(1,2可以理解为后台自己封装操作了);

3;直接将函数的属性和方法赋给了 当前的的this的对象;

在执行new操作后的话执行以下会有以下的过程:(面试题哦,手动滑稽)

1:创建一个对象;

2;将函数作用域上赋给了 当前的的新的对象;

3,执行一遍构造函数里的代码,给新对象赋值(方法貌似会自己跑一遍);

4,返回新的对象;

生成新的对象的构造器指向了生成他的构造函数

(console.log(  sunxingzhe.constructor=Mokey)       //true)

,你可以理解为孙行者是猴子这个构造函数生的);当然 用instanceof这个方法来检测也是可以的

(console.log(  sunxingzhe instanceof Mokey)       //true);

ps:像Object,Array等这种也是原生的构造函数哦;

这样的话我们就可以找到造孙悟空的 机器了,知道了是谁造的并且可以修改上面的属性和方法,一切变得可控,但是同时他会有一个新的问题;

function Monkey(){
     this.name="wukong",
     this.eye="fireGoldEyes";
     this.attack=function(){
    
     alert(this.name+"一棒造成了成吨的伤害")
     }
};

var sunxingzhe=new Monkey();
var liuermihou=new Monkey();

现在我们重新造一个新的大圣出来---六耳猕猴;

console.log(sunxingzhe.attack===liuermihou.attack)  //false;

我们会发现这每个对象在被new出来以后都会拥有一个不同的方法(方法中引用的地址不一样);















猜你喜欢

转载自blog.csdn.net/wangrong111222/article/details/80040885