js面向对象(一)

最新推荐文章于 2023-03-24 20:23:32 发布

原创最新推荐文章于 2023-03-24 20:23:32 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

38 篇文章

订阅专栏

面向对象（Object Oriented Programming）：使用对象时，只关注对象提供的功能，不关注其内部细节。不了解原理的情况下，会使用功能

对象：对象是一个整体，对象是JavaScript的基本数据类型。除了字符串，数字，true，false，null和undefind之外，JavaScript的值都是对象。对外提供一些操作。不了解内部结构，知道表面的各种操作。

面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用

面向对象编程(OOP)的特点

-抽象：抓住核心问题把主要的特征、问题相关的特征抽出来

-封装：不考虑内部实现，只考虑功能使用

-继承：从已有对象上，继承出新的对象

--多重继承同时继承多个对象的特性

--多态

对象的组成

-方法——函数：过程、动态的

-属性——变量：状态、静态

var a=12;//变量：不属于任何
alert(a);//=>12
var arr =[1,2,3,4,5,6];
arr.a=12;//属性：属于一个对象的
// alert(arr.a);//=>12
function aaa(){//函数：自由
  // alert('abc');//=>abc
}
arr.aaa = function (){//方法：属于一个对象
  // alert('abc');//=>abc
}
aaa();
arr.aaa();
// || 为对象添加方法和属性
// this:函数属于谁
arr.show = function (){
  // alert(this.a);//=>12
}
arr.show();

function show(){
  // alert(this);//=>window
}
show();
//---不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性
demo001
var obj001 = new Object();
obj001.name ='nainai';
obj001.qq ='39456238';
obj001.showName = function(){
  alert('My name :'+this.name);//=>My name :nainai
}
obj001.showQq = function(){
  alert('My qq :'+this.qq);//=>My qq :39456238
}
obj001.showName();
obj001.showQq();

封装成函数

工厂方式

什么是工厂

-原料

-加工

-出厂

工厂方式

-用构造函数创建一个类

-什么是类、对象（实例）：模具和零件

问题

-没有new

-函数重复定义

加上new

-偷偷做了两件事

-替你创建了一个空白对象

-替你返回了这个对象

new和this

function createObj(name,qq){//构造函数：用来构造一个对象，初始化一个新建的对象

  var obj001 = new Object();//原料

  //加工
  obj001.name =name;
  obj001.qq =qq;
  obj001.showName = function(){
    alert('My name :'+this.name);//=>My name :nainai
  }
  obj001.showQq = function(){
    alert('My qq :'+this.qq);//=>My qq :39456238
  }
  // 出厂
  return obj001;
}
var obj = createObj('sama','616010');
obj.showName();
obj.showQq();

var obj2 = createObj('sansan','37690');
obj2.showName();
obj2.showQq();

1，没有new

function show(){
  alert(this);//=>window
}
show();
new show();//此时调用，弹出的this是object。

function createObj(name,qq){
  // 新new出来的对象。在函数调用时加new，浏览器会声明变量this等于新的变量
  // var this = new Object();

  //加工
  this.name =name;
  this.qq =qq;
  this.showName = function(){
    alert('My name :'+this.name);//=>My name :nainai
  }
  this.showQq = function(){
    alert('My qq :'+this.qq);//=>My qq :39456238
  }
// return this，函数最后会返回出this
}
var obj =new createObj('sama','616010');
obj.showName();
obj.showQq();

var obj2 =new createObj('sansan','37690');
obj2.showName();
obj2.showQq();



  var arrf01 = new Array(1,7,9,12,15,18,20);
  arrf01.sum = function(){//类似css样式行间样式
    var res = 0,i,len=this.length;
    for(i=0;i<len;i++){
      res+=this[i];
    }
    return res;
  }
  alert(arrf01.sum());//=>82
  // 当两个数组时
  var arrf02 = new Array(2,6,9,12,15,18,30);
  Array.prototype.sum = function(){//类似css样式中类,
    var res = 0,i,len=this.length;
    for(i=0;i<len;i++){
      res+=this[i];
    }
    return res;
  }
  alert(arrf01.sum());//=>82
  alert(arrf02.sum());//=>92

原型

CSS中                                              js
class 一次给一组元素加样式 放相同的           原型，一次给一组元素加 放相同
行间样式  一次给一个元素加样式 放不同          给对象加东西
    
    <div class="box" style="color:red"></div>
    <div class="box"></div>
    <div class="box"></div>

原型——prototype

-什么是原型

-原型是class，修改他可以影响一类元素

-在已有对象中加入自己的属性、方法

-原型修改对已有对象的影响

为Array添加sum方法

-给对象添加方法，类似于行间样式

-给原型添加方法，类似于class

原型的小缺陷

-无法限制覆盖

类、对象

类：模子用于生成别的东西

对象：成品具备实际功能

var arrf01 = new Array(1,7,9,12,15,18,20);
    //Array  类
    //arrf01 对象
    //原型是往类加东西

2，函数重复

原型用到面向对象

在构造函数加属性，在原型加方法

function CreateObj(name,qq){//构造函数：用来构造一个对象，初始化一个新建的对象
  this.name =name;
  this.qq =qq;//在构造函数加属性，不同的放
}
CreateObj.prototype.showName = function(){//原型 相同的放原型
  alert('My name :'+this.name);//在原型加方法
}
CreateObj.prototype.showQq = function(){
    alert('My qq :'+this.qq);
}
var obj = new CreateObj('sama','616010');
obj.showName();
obj.showQq();

var obj2 = new CreateObj('sansan','37690');
obj2.showName();
obj2.showQq();