前端中的面向对象（通俗向）

话不多说。

面向对象，面向过程， 面向数据

本篇主要说 前端中的面向对象。

一、对象：一切事物皆对象     电视、收音机、手机

eg:
	var new Date();   arr；

总结：不了解原理的情况下，就能使用其功能。   面向对象
          不了解内部原理的结构，知道表面的各种操作（电视机按钮）。   对象

          你只管用,不用操心内部的具体实现

          对象：万物皆对象

程序 - 对象：方便、为了提高生产率。

	new Image()
	new Date()
		getFullYear()
		getMonth()
	new Array()
		length
	new Function()
	new RegExp()...

二、面向对象的三大特点：

1、封装  2、继承  3、多态

三、写一个面向对象？
       对象组成部分：
        1、属性(相当于变量)
        变量 - 相对是自由的

        属性 - 有所属

eg:

var  a = 12;  alert(a)   //变量：自由的，不属于任何人

   var arr = [1,2,3,4,5];   arr.a = 12;  arr.a++;  alert(arr.a)   //属性：不自由的，属于对象的。

                2、方法(相当于函数)

eg:
	//函数
	function aaa(){
		alert('abc')；
	}
	//方法
	var arr = [1,2,3,4,5]; 
	arr.aaa = function(){
		alert('bcd')
	}
	aaa();
	arr.aaa()

四、面向对象中的this.

this:当前发生事件的对象() 

eg:
	var arr = [1,2,3,4,5];
	arr.a = 12;
	arr.show = function(){
		alert(this.a)
	}
	arr.show();

this: 当前的方法属于谁 就指向谁

//局部函数里面的this指向window
window.show = function(){

		alert(this)
}

五、面向对象之造人。

1、面向对象 - 造人
属性：物体的特征 静态的
方法：物体的行为 动态的
2、面向对象的第一个小程序：
构造函数(就是函数) - 因用途得名

构造函数首字母必须大写

Object 几乎为空对象

3、设计模式：
工厂模式：
原料 obj
加工 属性、方法

出厂 return

eg:

	var obj1 = new Object();
	obj1.name = '帅蓝';
	obj1.age = '24';
	obj1.showName = function(){
		alert('我的名字叫 '+this.name)
	}
	obj1.showAge = function(){
		alert('我今年 '+this.age+' 岁了！')
	}

	obj1.showName();
	obj1.showAge()

eg:
function createMan(name,age){
		//原料
		var obj = new Object();
		//加工
		obj.name = name;
		obj.age = age;
		obj.showName = function(){
			alert('我的名字叫 '+this.name)
		}
		obj.showAge = function(){
			alert('我今年 '+this.age+' 岁了！')
		}

		//出厂
		return obj;

	}
	var oP = createMan('帅蓝','24');
	oP.showAge();

4、给工厂里面添加了一台高级的机器。

    new: - 自动化
    ①、帮你自动创建一个空对象并且赋值给this            //this = new Object();
    ②、帮你把this自动return出去                       //return   this

    ③、new后面跟的永远都是函数(构造函数)

eg:

	function show(){
		alert(this)
	}
	show()                   //window
	new show()               //object	

eg:	

function createPerson(name,age){
	//var obj = new Object();
	this.name = name;
	this.age = age;
	this.showName = function(){
		alert('我的名字叫 '+this.name)
	}
	this.showAge = function(){
		alert('我今年 '+this.age+' 岁了！')
	}

	//return obj

}

	var obj = new createPerson('帅蓝','24')
	obj.showName();
	obj.showAge()

	var obj1 =  new createPerson('帅蓝1','25')
	obj1.showName();
	obj1.showAge()

5、原型。

构造函数里面的方法不相等：
构造函数 - 类

prototype 原型    给一类物体添加东西         class

eg:
	var arr = new Array(12,25,33,4,14,25);
	var arr1 = new Array(25,44,21,45,1,5);
	Array.prototype.sum = function(){
		var num = 0;
		for(var i=0;i<this.length;i++){
			num+=this[i]
		}
		return num;
	}
	// arr1.sum = function(){
	// 	var num = 0;
	// 	for(var i=0;i<this.length;i++){
	// 		num+=this[i]
	// 	}
	// 	return num;
	// }

	alert(arr.sum());
	alert(arr1.sum());

总结：

面向对象：
构造函数(类) - 放属性

给构造函数的原型(prototype)添加方法

eg:
function createPerson(name,age){
	//var obj = new Object();
	this.name = name;
	this.age = age;
	// this.showName = function(){
	// 	alert('我的名字叫 '+this.name)
	// }
	// this.showAge = function(){
	// 	alert('我今年 '+this.age+' 岁了！')
	// }

	//return obj

}
createPerson.prototype.showName = function(){
	alert('我的名字叫 '+this.name)
}
createPerson.prototype.showAge = function(){
	alert('我今年 '+this.age+' 岁了！')
}
	var obj = new createPerson('帅蓝','24')
	obj.showName();
	obj.showAge()
	var obj1 =  new createPerson('水岸蓝','25')
	obj1.showName();
	obj1.showAge()

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

六、call和apply的区别和相同点（两者是啥）。

    相同点：用于面向对象编程中强制转换this指向。
    区别：前者的写法是show.call(this,a,b,c)，后者的写法是show.apply(this,arguments)；

      .call(指向谁,参数,参数) - 强制改变this指向。

eg:
	 function show(a,b){
            alert(this+'\n'+'a:'+a);
        }
        show.call([1,2,3],12,88);
eg:
	function A(){
		this.name = 'abc';
	}
	A.prototype.showName = function(){
		alert(this.name)
	}
	function B(){
		//this指向是new出来的B   B.name = 'abc';
		A.call(this);
	}
	var B = new B();
	alert(B.name)
		.apply(指向谁,数组(argument))
eg:
 	function show(a,b){
            alert(this+'\n'+'a:'+a+'\n'+'b:'+b);
        }
        show.apply('sdfds',[10,11]);

七、继承 - 子级可以用父级的属性和方法,但是父级不能用子级的。

方法

Worker.prototype = Person.prototype;

eg:
	function A(){
		this.name = 'abc';
	}
	A.prototype.showName = function(){
		alert(this.name)
	}

	function B(){
		//this指向是new出来的B   B.name = 'abc';
		A.call(this);
	}
	B.prototype = A.prototype;
	B.prototype.fn = function(){
		alert('123')
	}
	var objB = new B();
	var objA = new A();
	// alert(B.name)
	objB.showName()
	objA.fn()

    问题: 子级添加方法,父级能用了           // 引用

eg:
	var arr = [1,2,3,4]
	arr1 = arr;
	arr1.push(5)
	alert(arr)

浏览器为了节省资源，将arr1指向arr，并不是复制一份。

解决办法：
	function A(){
		this.name = 'abc';
	}
	A.prototype.showName = function(){
		alert(this.name)
	}

	function B(){
		//this指向是new出来的B   B.name = 'abc';
		A.call(this);
	}
	for(var i in A.prototype){
		B.prototype[i] = A.prototype[i]
	}
	// B.prototype = A.prototype;
	B.prototype.fn = function(){
		alert('123')
	}
	var objB = new B();
	var objA = new A();
	// alert(B.name)
	objB.showName()
	objA.fn()                   //报错

原理：
循环去复制过来每一个东西
* obj.prototype = new obj1();

  obj.prototype.constructor = obj;

                对象没有赋值的概念,两个对象的=叫引用

****** -----》》》原型链

                如果子级自己有的话去子级里面找,如果没有去父级去找，如果父级还是没有去父级的父级去找。

八、多态。

     继承多个对象。

九、诡异的事件！！！！！！！！！！

1、Object和Function互相属于并且自己属于自己
    true
    eg:alert(Object instanceof Function);
         alert(Function instanceof Object);
         alert(Function instanceof Function);
        alert(Object instanceof Object);
2、arr属于Object,Object属于Function,arr不属于Function
  eg:var arr = new Array(1,2,3,4,5);
         alert(arr instanceof Array);
         alert(Array instanceof Object);
         alert(arr instanceof Object);
         alert(Object instanceof Function);
         alert(arr instanceof Function);
3、基本类型都不是对象   new出来的对象才是对象。
        var a = 12;
        alert(a instanceof Object);   false
       var a = new Number(12);
        alert(a instanceof Object);   true
        4 、constructor - 构造器、构造函数
        检测一个物体到底是由谁构造出来的 - 亲爹
        obj.constructor == Object
检测obj是否由Object构造出来的
        var oDate=new Date();
                var arr=new Array();
                alert(arr.constructor==Object);
        alert(oDate.constructor==Date);