首页 > 代码库 > 面向对象

面向对象

2024-08-22 08:00:46   228人阅读

1、什么是对象
对象是一个整体，对外提供一些操作
2、什么是面向对象
使用对象时，只关注对象提供的功能，不关注其内部细节
比如jQuery，我们不必观察其内部的细节
3、面向对象的三大特性：
封装：不考虑内部实现，只考虑功能使用
继承：从已有的对象上，继承出新的对象
多态：子类和父类有相似的操作方法，但又不太一样
4、对象的组成
属性 ------ 变量：状态，静态的
变量是自由的，而属性是属于对象的
var a = 12; //全局变量
alert(window.a);//12
方法 ------ 函数：动态的
函数是自由的，而方法是属于对象的
function show(){
alert(this);
}
show();//window
等价于:window.show = function(){
alert(this);
}
5、创建对象的方法
工厂模式：
①来源（员工登记表）：
var obj = new Object();
obj.name = ‘zhangsan‘;
obj.sex = ‘boy‘;
obj.showName = function(){
alert(this.name);
}
obj.showSex = function(){
alert(this.sex);
}
obj.showName();
obj.showSex();
 
var obj = new Object();
obj.name = ‘lisi‘;
obj.sex = ‘girl‘;
obj.showName = function(){
alert(this.name);
}
obj.showSex = function(){
alert(this.sex);
}
obj.showName();
obj.showSex();
问题：如果有一百个员工需要写一百个
解决：重复的可以放在一个函数里面封装起来
//工厂模式：原料、加工、出厂
function createPerson(name,sex){ //构造函数
//原料
var obj = new Object();
//加工
obj.name = name;
obj.sex = sex;
obj.showName = function(){
alert(this.name);
}
obj.showSex = function(){
alert(this.sex);
}
//出厂
return obj;
}
var p1 = createPerson(‘zhangsan‘,‘boy‘);
var p2 = createPerson(‘lisi‘,‘girl‘);
p1.showName();
p1.showSex();
p2.showName();
p2.showSex();
问题：p1.showName != p2.showName，一百个对象有一百个showName方法，这样会浪费资源
工厂模式的问题：
①没有new
new Date()
new Array()
加了new，构造函数里面的东西会得到简化，并且很多东西会变得可用，继承
②每个对象都有自己的一套函数----及其浪费资源 why？
举例：匿名函数
function a(){
alert(‘abc‘)
}
function b(){
alert(‘abc‘)
}
alert(a==b) //false
相当于 var a = new Function("alert(‘abc‘)");
var b = new Function("alert(‘abc‘)");
显然 a != b
 
 
函数前面有new的时候：new + 构造函数的方法
function createPerson(name,sex){
//假想的系统内部工作流程，替我们创建obj对象var obj = new Object();
 
this.name = name;
this.sex = sex;
this.showName = function(){
alert(this.name);
}
this.showSex = function(){
alert(this.sex);
}
//假想的系统内部工作流程，替我们 return obj;
}
var p1 = new createPerson(‘zhangsan‘,‘boy‘);
var p2 = new createPerson(‘lisi‘,‘girl‘);
p1.showName();
p1.showSex();
p2.showName();
p2.showSex();
创建和返回系统都替我们做了，只需要在this上添加东西（外面加了new ，里面就不用加new,外面没有new，里面就要加new）
举例：
function show(){
alert(this);
}
show(); //window
function show(){
//隐式的为我们创建new object对象
alert(this);
}
new show(); //object
然而：此时p1.showName != p2.showName
举例： var arr1 = new Array();
var arr2 = new Array();
arr1.sum = function(){
alert(‘1‘);
}
arr1.sum(); //1
arr2.sum(); //arr2.sum is not a function
为什么会出现这样的结果？
因为arr1和arr2是不同的对象，arr1有sum方法，arr2没有sum方法
我们可以在类的原型上添加方法，这样大家都共有这个sum方法：这个原型的作用和class相似，都是给一类元素或者对象添加方法和属性
var arr1 = new Array();
var arr2 = new Array();
Array.prototype.sum = function(){
alert(1);
}
arr1.sum(); //1
arr2.sum(); //1
什么是类？对象？
类：比如做蛋糕的模子
对象（实例）：做好的蛋糕
var arr = new Array();
Array 类，不具备实际的功能，只能用来构造对象，模子本身不能吃
arr对象 真正有功能的东西，是被类构造出来的
原型的重要功能？
可以拓展系统对象的方法
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g,‘‘)
}
var str = ‘ jjs k kk j ‘;
alert(‘(‘+ str.trim() +‘)‘); // (jjs k kk j) 去掉字符串首位空格
介绍了prototype方法之后，我们来解决第二个问题：资源浪费
既然系统内置对象可以用prototype，我们自行创建的对象也可以用prototype方法
 
function createPerson(name,sex){
this.name = name;
this.sex = sex;
}
createPerson.prototype.showName = function(){
alert(this.name);
}
createPerson.prototype.showSex = function(){
alert(this.sex);
}
var p1 = new createPerson(‘zhangsan‘,‘boy‘);
var p2 = new createPerson(‘lisi‘,‘girl‘);
alert(p1.showName == p2.showName); //true
createPerson就是我们的类，也就是我们的构造函数，这里我认为构造函数和类本身是一个东西typeof Date >> 结果是function
总结：构造函数里面添加的是属性，每个对象的属性各不相同
原型里面添加的方法是所有对象都一样的
class 改变一类元素的样式 prototype
行间样式 改变一个元素的样式 给类添加一个属性 优先级更高
var arr = [1,2,3];
arr.a = 5；优先级更高
Array.prototype.a = 12;
alert(arr.a)； // 5
 
 
var arr = [1,2,3];
arr.a = 5；优先级更高
Array.prototype.a = 12;
delete arr.a; //delete 用来删除添加的属性
alert(arr.a)； // 12

面向对象


联系
我们