javaScript面向对象是什么?(一)

发布于 2021-7-21 15:16
浏览
0收藏

js就是个面向对象语言,一切皆对象

 

一、什么是面向对象?

 

  简单点,就这么说吧。生活中有一些个物品,譬如(哈哈,还想起个譬如)说一个iPhone,我们也不知道里面的工作原理吧?但是咱们会按按钮呀,用一俩天就会用了, oh my god,不知道原理就会用,好厉害。

  那么javaScrip中的自带方法Date对象都知道吧, 这兄弟有个儿子(闺女也行,你说什么就是什么)getMonth的方法,那你知道它是怎么知道现在是哪个月吗?不知道。管他呢,但是me会用

  其实呢,我们不需要知道原理就可以用它的功能,就是面向对象。

   其实对象就是一个整体,对外提供一些功能和操作,而你不知道它内部是怎么操作的。在编程中我们叫面向对象,在生活中也有,但是叫法不一样

  在编程中,就像jQuery,你知道它的$('div') 怎么获取到的DOM对象吗,不知道。(‘’我知道‘’,‘去一边去,你是看了源码。你拆机了,你能不知道?’)只要知道它干嘛的就行,那他是不是面向对象编程的呢?

 

二、面向对象特点

 

1、抽象:抽指把核心的东西抽出来,把与我们要解决的问题有关的东西拿出来摆在面前 

2、封装:让使用对象的人不考虑内部实现,只考虑功能使用  把内部的代码保护起来,只留出一些个api接口供用户使用

3、继承:就是为了代码的复用,从父类上继承出一些方法和属性,子类也有自己的一些属性 

4、多态:实际上是不同对象作用与同一操作产生不同的效果。多态的思想实际上是把“想做什么”和“谁去做“分开

 

三、对象的组成

 

1、方法   函数:过程、动态的

2、属性   变量:状态、静态的

 

四、this       当前的方法属于谁就是谁

 

例如点击事件里的this,其实就是触发事件的那个dom对象的onclick方法里的this,当然是人家自己咯

 再比如说一个函数里的this,这个函数都属于window的一个方法,当然里面的this也是window咯

  还有哦,不要在系统对象上面添加属性和方法,这样不太好

 那么在谁身上加呢?在object这个对象身上,别的date呀array呀,这些对象都是有一些个好玩的功能的,

  object也就自己最强大的一个功能就是,没有功能~~~~ 这样咱们就可以随意给他加属性和方法而不用去想会不会覆盖了

 

五、创建对象的方法

 

1、最基础的

var obj = new Object()
obj.name = 'shizhikai'
obj.age = '3岁'
obj.showAge = function(){
  console.log(this.age)  //这个this是谁?知道吗?  obj
}

但是这样太麻烦,我要写100个人,那得写100次。有别的方法吗?有

2、工厂方式 通过构造函数

function createPerson(name,age){
   // 原料
   var obj=new Object();
   // 加工
   obj.name=name;
   obj.age=age;
   obj.showAge=function() {
      alert(this.age)
   }
   // 出厂
   return obj;
}
var obj1=createPerson("shizhikai",'3岁')
var obj2=createPerson("ni",'18岁');

alert(obj1.showName)//function(){alert(this.name)}
alert(obj2.showName)//function(){alert(this.name)}

 

结果都一样但是比较一下:

1 console.log(obj1.showName==obj2.showName) //false

 

这里居然是不一样!!这样的话那我一百个对象就有一百个不一样的方法要占用内充~~~~

 

也就说会有两种问题:1.  创建对象没有用到new  感觉心里空落落的  2. 方法都不一样的话太占据空间了~~~~

那就去解决

function createPerson(name,age){
   // 原料   系统偷偷摸摸做的
   // var this=new Object();
   // 加工
   this.name=name;
   this.age=age;
   this.showName=function() {
      alert(this.name)
   }
   // 出厂   系统偷偷摸摸做的
   // return this;
}

var obj1=new createPerson("shizhikai",'3岁')
var obj2=new createPerson("ni",'18岁');

 

这样的话代码又少了很多,很爽,而且还有new了,其实就是利用了一个概念,任何函数都可以new一下

譬如

function aa(){}
console.log(new aa())  //Object

 

那它就变成对象啦,那它里面的this就是它new出来的自己啦~~~~

但是这样还是有一个问题

console.log(obj1.showName==obj2.showName) //false

 

还要占内存

那继续解决

这里就要用到面向对象中不得不说的,而且很重要的的东西.prototype 原型~~~

 

六、.prototype


先来看个例子,比如说有两个熊,熊大、熊二去偷了同一颗苹果树上的蜂蜜窝,熊大偷了后又拿了个苹果,熊二看见熊大有苹果就不干了,去找苹果树的理论,为什么他

有我没有,这就不讲道理了吧,毕竟熊大那个苹果是自己顺便拿的,熊二当然没有了,但是如果说蜂蜜窝就在苹果上面筑的巢话,这样熊大就不用去拿苹果了,直接全窝端,哈哈哈。俩只熊都有了呢,皆大欢喜。

1 var xiong1=[1,2,3];
 2 var xiong2=[4,5,6]; 3 xiong1.sum=function(){ 4    var result=0;
 5    for(var i=0;i<this.length;i++){
 6       result+=this[i]
 7    }
 8    return result;
 9 }
10 alert(xiong1.sum()) //611 alert(xiong2.sum()) //error

 

就像这个例子,xiong2根本没有这个方法嘛,想要的话,只能自己去添加咯,再写一遍

xiong2.sum=function(){
   var result=0;
   for(var i=0;i<this.length;i++){
      result+=this[i]
   }
   return result;
}

这样还是麻烦,占内存

var xiong1=[1,2,3];
var xiong2=[4,5,6];
Array.prototype.sum=function(){
   var result=0;
   for(var i=0;i<this.length;i++){
      result+=this[i]
   }
   return result;
}

alert(xiong1.sum()) //6
alert(xiong2.sum()) //15


function createPerson(name,age){
   this.name=name;
   this.age=age;
}
createPerson.prototype.showAge=function(){
   this.showAge=function() {
      console.log(this.age)
   }
}

 

那么上一个知识点的那两个问题可就都解决了哦~~~

这样也就发展出一个广泛的一个写法了哦

用构造函数去写自有属性和方法,用原型去写共有的属性和方法,这种方式叫混合方式

 

那么面向对象说完没?没有,下节再看吧。

已于2021-7-21 15:16:45修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐