面向对象(OOP)

170 阅读5分钟

面向对象:对代码的一种抽象,对外统一提供调用接口的编程思想。

Object是所有类的根类

对象分为两类:普通对象与函数对象,使用new Function 构造出来的对象都属于构造函数对象,其他的属于普通对象。

名词解释:

  • 属性:事物的特性

  • 方法:事物的功能

  • 对象:事物的实例

  • 原型:JS函数中的prototype属性的值,该属性引用了一个对象,即原型对象(原型)。【所有对象都有一个prototype属性,也就是都有一个原型对象】

function F(){ //自定义函数

}
F.prototype // [Object Object] 对象 prototype中存储一个内存地址 地址指向一个对象   
F.prototype instanceOf Object // true
使用函数构造器能够创建一个函数对象
new Function(var1,var2,函数体); var1,var2顺序不可以变
var obj = new Function("a","b","return 2+5");
var s = obj(2,5); //7

基于原型的面向对象:对象是依靠构造器(constructor),利用原型(prototype)构造出来的

闭包:是一个拥有很多变量,并绑定了这些变量的环境的表达式(通常是一个函数)。

函数内部能够访问全局变量
为了使局部变量能够在全局作用域中被访问到会使用闭包形式来解决这个问题
function a(){
var i = 1;
function b(){
  alert(++i);
}
return b;
}
var c = a();
c(); //1

闭包的另外一个作用就是 使局部变量保存在内存中,也算是它的缺点,内存浪费严重,容易造成内存泄漏。
function f1(){
var n =999;
nAdd = function(){
 n = n+1;
}
function f2(){
 alert(n);
}
return f2;
}
rs();//999
aAdd();//--->执行了
rs();//1000

例子:
  var li=document.getElementsByTagName("li");
        for(var i=0,len=li.length;i<len;i++){
            (function(i){
               li[i].onclick= function(){
                   alert(i);
               };
            })(i)
     	}
        
像普通的函数传参一样,立即执行函数也能传参数。如果在函数内部再定义一个函数,而里面的那个函数能引用外部的变量和参数(闭包),利用这一点,我们能使用立即执行函数锁住变量保存状态。

练习中就是利用的立即执行函数能配合闭包保存状态 , 在立即执行函数中 , 点击事件绑定了一个函数 , 结构上实现函数的嵌套 . 而点击事件中使用了它外面的变量i , i在每次循环中都保存下来当前的值 , 所以实现了一个闭包的特性哦

声明对象

1.字面式声明对象

var person = {
	name:"zhangsan",
    play:function(aaa){
       alert("我在吃"+aaa);
    }
}
alert(person instanceOf Object//true

2.使用new+Object

  • Object 是所有javascript对象的基类
var obj = new Object();
obj.name = "zhangsan"
obj.play = function(aaa){
       return this.name; //this表示当前对象
    }

3.使用Js中构造方法声明对象

function person(name,age,sex){
   this.name = name;
   this.age = age;
   this.sex = sex;
   this.show = function (){
   	  alert(this.name+"----"+this.age+"----"+this.sex);
   }
}
var obj1 = new person("zhangsan","nan",18);
obj1.show();
var obj2 = new person("lisi","nv",16);
obj2.show();
//obj1 与obj2 是两个实例对象
函数内部只能用this访问属性与方法

4.使用工厂模式创建对象

  • 工厂模式就是按照某种模式可以不断的创造对象
function createObj(name){
   var obj = new Object();
   obj.name = name;
   obj.run = function (){
       return this.name + "is running";
   }
   return obj;
}

var obj1 = createObj("zhangsan");
var obj2 = createObj("lisi");
//obj1 与 obj2 两个对象
构造方法模式:不需要创建对象,将属性赋值给this,不需要返回对象
工厂模式:需要创建对象,将属性方法赋值给obj对象,需要返回对象

5.原型模式创建对象

  • 任何Js方法和函数都自带一个prototype属性,且它以对象方式存在
  • 原型模式的根本:函数本身声明为空内容,利用prototype,定义一些属性和方法,能够让所有实例化的对象都拥有它的属性与方法
// 第一种方式
function test(){
}
alert(test.prototype instanceof Object);// prototype是Object子对象
test.prototype.color ="red";
test.prototype.showInfo = function(){
   alert(this.color);
}
var car1 = new test();
car1.showInfo();

// 第二种方式
//json数据定义属性与方法
function test(){
}
test.prototype = {
   color:"red",
   showInfo:function(){
   	alert(this.color);
   }
}

6.混合模式声明对象----开发中这种模式用的多

构造+原型
function test(name,url){
	this.name =name;
    this.url =url;
}
test.prototype={
  age:15,
  showInfo:function(){
      alert(this.color);
     }
}
var car2= new test("zhangsan","http://www.baidu.com");
car2.showInfo();

对象的遍历及存储

对象的遍历

对象可以当做数组处理 for in
var people = {};
people.name = "zhangsan";
people.demo = function(){
	alert(this.name);
}
for(var i in people){ //i是属性或方法名称
	alert(people[i]);// 取得的是属性的值 或者方法的定义代码
}

使用构造函数声明的对象要实例化后才可以进行遍历

对象的存储

对象的封装

封装(Encapsulation):把对象内部数据和操作细节进行隐藏

大多数面向对象的语言都支持封装的特性,提供了private关键字来隐藏某些属性或方法,用来限制被封装的数据或者内容的访问,只对外提供一个对象的专门访问的接口。(接口一般为调用方法)
Javascript 中可以通过闭包实现封装
// 封装
function demo(){
    var n = 1; // 局部变量,在方法外部不能直接访问
	function test(){ // 外部调用的出口
        n++;
    }
    test();
     return n; //2
}

//以下闭包写法具有真正封装的意义
function demo(){
    var n = 1; // 局部变量,在方法外部不能直接访问
	function test(){ // 特权方法
        return ++n;
    }
    return test; 
}
var at = demo();
alert(at());

function A(){
  var t = 3;
  function _xx(){
  	alert(11+"***");
  }
  this.xx = function(){
     return _xx;
  }
}
A.prototype ={
  oth:function(){
      alert("普通方法");
  }
}
var a= new A();
var b = a.xx();
b();
//缺陷:占用内存 2. 不利于继承

例子:
function Student() {
var privateStore = new Object();
var _set = function () {
var arr = arguments[0];
for (var i in arr) {
privateStore[i] = arr[i];
}
}
var _get = function () {
return privateStore.name + " " + privateStore.age + " " + privateStore.sex
}

privateStore.get = function () {
return _get()
}

privateStore.set = function () {
return _set(arguments[0])
}

return privateStore
}

var stu = new Student();
stu.set({name: "小明", age: 23, sex: "男"});
document.write(stu.get())