面向对象

Posted 2020-11-29 happyeveryuday

var obj = new Object( )

obj 是对象，Object 是类。

对象是类的实例和具体，类是对象的集合。
举个例子：如果说类是女朋友的话，对象就是你的女朋友。
js中的四大内置对象，都是由类实例化的。
以上由ECMAScript 6底层规定如此。

工厂模式
来看一个简单案例，我们要创建一些数据信息，比如创建员工的信息。笨拙的方法是一个函数一个函数写。

//定义第一个人
var obj1 = new Object();
obj1.name = "小刚";
obj1.sex = "男";
obj1.age = "24";
obj1.interest = "网上冲浪";
obj1.sayHello = function(){
    alert(this.name);
}

//定义第二个人
var obj2 = new Object();
obj2.name = "小兰";
obj2.sex = "女";
obj2.age = "22";
obj2.interest = "吃火锅";
obj2.sayHello = function(){
    alert(this.name);
}

//定义第三个人
var obj3 = new Object();
obj3.name = "小梦";
obj3.sex = "男";
obj3.age = "29";
obj3.interest = "发呆";
obj3.sayHello = function(){
    alert(this.name);
}
//写不下去了。。。
obj1.sayHello();
obj2.sayHello();
obj3.sayHello();

属性值都是变化的，但方法是一样的。
让我们来创建一个工厂。

function factory(){
    var obj = new Object(name,sex,age,interest);
    obj.name = name;
    obj.sex = sex;
    obj.age = age;
    obj.interest = interest;
    obj.sayHello = function(){
        alert(this.name);
    }
    return obj;
}
var obj1 = factory("小刚","男","24","网上冲浪");
var obj2 = factory("小兰","女","22","吃火锅");
var obj3 = factory("小梦","男","29","发呆");

对比一下，通过封装，代码量减少了很多，整体也优雅了许多。这就是面向对象思想的一个小小体现。

构造函数

new后面就是构造函数，构造函数中的this就是指向当前对象。

var arr = new Array( );
以上：
对象=》arr，类=》Array。对象是由类所构造的。
所以：
Array( ) 即为构造函数。

还是以上案例，让我们变形一下。

function Factory(name,sex,age,interest){
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.interest = interest;
    this.sayHello = function(){
        alert("你好"+this.name);
    }
}

var obj1 = new Factory("小刚","男","24","网上冲浪");//this指向 obj1
var obj2 = new Factory("小兰","女","22","吃火锅");//this指向 obj2
var obj3 = new Factory("小梦","男","29","发呆");//this指向 obj3

obj1.sayHello();
obj2.sayHello();
obj3.sayHello();

//构造函数中，首字母要大写

obj1 是 对象； Factory 是 类； Factory() 是构造函数。
普通函数封装后可以再new成构造函数。

js中四大内置对象同理。es6出现之前，前端中并没有类的概念，只讲对象和实例，只能通过以上的方法模拟类。es6出现之后就统一了江湖。现在又出现==.vue==,.scss,.ts,mvc等，都是由后台模拟过来。例如Java之前需要编译城javac。我们vue编译成html，scss编译成css，ts编译成js，这些语言的思想都是相似的。

原型

原型是用于存放公用的方法和属性的，让公用的方法和属性在内存中存在一份，提升性能。写于构造函数下。
js就是基于原型的对象。

直接来看一段笨拙的数组求和的代码。

var arr1= [1,2,4];
var arr2 = [3,3,4,5,6,8,9];
//数组求和
var sum1 = 0;
for(var i = 0;i<arr1.length; i++){
    sum1 += arr1[i];
}
console.log(sum1);

var sum2 = 0;
for(var i = 0;i<arr2.length; i++){
    sum2 += arr2[i];
}
console.log(sum2);

还是上面两个数组，再来封装一下

function sum(arr){
    var sum = 0; 
    for(var i = 0;i<arr.length; i++){
        sum2 += arr[i];
    }
    return sum;
}
console.log(sum(arr1));
console.log(sum(arr2));
//可以得到相同的结果

这是最普通的实现方式，下面让我们继续优化一下，使代码更加优雅。

还是上面两个数组。

Array.prototype.sum = function(){
    //this指向当前对象
    var sum = 0;
    for(var i = 0;i<this.length;i++){
        sum += this[i];
    }
    return sum;
}
console.log(arr1.sum);
console.log(arr2.sum);
//还是相同的结果

在这里，length便是公用的属性，求和就是方法。
基于此，未来出现数组求和都能实现。

再回到最开始关于添加人员的案例，我们只需要改动一句代码便可以使其变成原型。
原型写在构造函数后。

function Factory(name,sex,age,interest){
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.interest = interest;
}

Factory.prototype.sayHello = function(){
    alert("你好"+this.name);
}

var obj1 = new Factory("小刚","男","24","网上冲浪");//this指向 obj1
var obj2 = new Factory("小兰","女","22","吃火锅");//this指向 obj2
var obj3 = new Factory("小梦","男","29","发呆");//this指向 obj3

obj1.sayHello();
obj2.sayHello();
obj3.sayHello();