前端中的面向对象（通俗向）
话不多说。
面向对象，面向过程， 面向数据
本篇主要说 前端中的面向对象。
一、对象：一切事物皆对象 电视、收音机、手机
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总结：
面向对象：
构造函数(类) - 放属性
给构造函数的原型(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)解决办法：
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);