理解面向对象

最新推荐文章于 2023-02-28 23:01:49 发布

呦呦_鹿鸣

最新推荐文章于 2023-02-28 23:01:49 发布

阅读量168

点赞数

分类专栏：个人学习文章标签：面向对象 js

个人学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、创建对象
工厂模式
二、构造函数的方法
构造函数创建对象执行的过程：
三、原型
1.原型对象
2.原型链
1）proto和prototype
2）constructor
四、继承
1.call+遍历
2.寄生组合继承

https://www.cnblogs.com/jingwhale/p/4678656.html

ES有两种开发模式：
1 函数式（面向过程） 2 面向对象（oop）

面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。js（ES5）无class类型，但是每个函数都有一个prototype属性。prototype指向一个对象，当函数作为构造函数时，prototype则起到类似class的作用。

构造函数：当一个普通函数和new运算符一起使用时，称该函数为构造函数，首字母大写。

特点：
封装继承多态
封装：将数据和对数据的操作集中在一起
继承：一个类型的对象能访问另一个类型的属性和方法
多态：一个同一操作针对于不同的对象会有不同的结果

一、创建对象
var box = new Object(); //创建一个Object 对象
box.name = ‘Lee’; //创建一个name 属性并赋值
box.age = 100; //创建一个age 属性并赋值
box.run = function () { //创建一个run()方法并返回值
return this.name + this.age + ‘运行中…’;
};
alert(box.run()); //输出属性和方法的值

上面创建了一个对象，并且创建属性和方法，在run()方法里的this，就是代表box 对象本身。这种是JavaScript 创建对象最基本的方法，但有个缺点，想创建多个类似的对象，就会产生大量的代码。

工厂模式
function createObject(name, age) { //集中实例化的函数
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function () {
return this.name + this.age + ‘运行中…’;
};
return obj;
}
var box1 = createObject(‘Lee’, 100); //第一个实例
var box2 = createObject(‘Jack’, 200); //第二个实例
alert(box1.run());
alert(box2.run()); //保持独立

工厂模式解决了重复实例化的问题，但是它有许多问题，创建不同对象其中属性和方法都会重复建立，消耗内存；还有函数识别问题等等。

二、构造函数的方法
1）函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和
普通函数)；
2）通过构造函数创建对象，必须使用new 运算符。

function Box(name, age) { //构造函数模式
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + ‘运行中…’;
};
}
var box1 = new Box(‘Lee’, 100); //new Box()即可
var box2 = new Box(‘Jack’, 200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的识别他从属于Box

构造函数创建对象执行的过程：
1）创建一个新对象
当使用了构造函数，并且new 构造函数()，那么就后台执行了new Object()；
2）改变this指向
将构造函数的作用域给新对象，(即new Object()创建出的对象)，而函数体内的this 就
指向new Object()出来的对象。
3）执行构造函数内的代码
4）返回这个新创建的对象
(后台直接返回)
构造函数、原型对象中this最后都指向创建的实例

ps：
1）构造函数和普通函数的唯一区别，就是他们调用的方式不同。只不过，构造函数也是函数，必须用new 运算符来调用，否则就是普通函数。
2）this就是代表当前作用域对象的引用。如果在全局范围this 就代表window 对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。

这种方法解决了函数识别问题，但消耗内存问题没有解决。同时又带来了一个新的问题，全局中的this 在对象调用的时候是Box 本身，而当作普通函数调用的时候，this 又代表window。即this作用域的问题。

三、原型
我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。
即 prototype 通过调用构造函数而创建的那个对象的原型对象。
使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

function Box() {} //声明一个构造函数
Box.prototype.name = ‘Lee’; //在原型里添加属性
Box.prototype.age = 100;
Box.prototype.run = function () { //在原型里添加方法
return this.name + this.age + ‘运行中…’;
};

构造函数的声明方式和原型模式的声明方式存储情况如下：

解决了消耗内存问题。当然它也可以解决this作用域等问题。

属性放到构造函数里
方法放到原型对象上

var person = function(name){
this.name = name
};
person.prototype.getName = function(){
return this.name;
}
var zjh = new person(‘zhangjiahao’);
zjh.getName(); //zhangjiahao

function aaa(){}
var bbb = new aaa();

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function () {
    console.log(this.name);
};
var person1 = new Person("john1",21);

每一个构造函数都有一个原型对象
每一个原型对象都有指向构造函数的指针
每一个实例都有指向原型对象的内部指针
原型对象上的属性和方法能被实例访问

1.原型对象
　　每个javascript对象都有一个原型对象，这个对象在不同的解释器下的实现不同。比如在firefox下，每个对象都有一个隐藏的proto属性，这个属性就是“原型对象”的引用。

2.原型链
　　由于原型对象本身也是对象，根据上边的定义，它也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链，JavaScritp引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined.原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。

1）proto和prototype
JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。
以下面的例子为例：
console.log(zjh.proto === person.prototype) //true
同样，person.prototype对象也有proto属性，它指向创建它的函数对象（Object）的prototype
console.log(person.prototype.proto === Object.prototype) //true
继续，Object.prototype对象也有proto属性，但它比较特殊，为null
console.log(Object.prototype.proto) //null
我们把这个有proto串起来的直到Object.prototype.proto为null的链叫做原型链。

2）constructor
原型对象prototype中都有个预定义的constructor属性，用来引用它的函数对象。这是一种循环引用
person.prototype.constructor === person //true
Function.prototype.constructor === Function //true
Object.prototype.constructor === Object //true

四、继承
实现继承的方式依靠原型链完成
被继承的函数称为超类型(父类，基类也行，其他语言叫法)，继承的函数称为子类型(子类，派生类)
1.call+遍历
属性使用对象冒充（call）（实质上是改变了this指针的指向）继承基类，方法用遍历基类原型。
function A()
{
this.abc=12;
}

A.prototype.show=function ()
{
alert(this.abc);
};

//继承A
function B()
{
//继承属性；this->new B()
A.call(this); //有参数可以传参数A.call(this,name,age)
}

//继承方法；B.prototype=A.prototype;
for(var i in A.prototype)
{
B.prototype[i]=A.prototype[i];
}
//添加自己的方法
B.prototype.fn=function ()
{
alert(‘abc’);
};

var objB=new B();
var objA=new A();objB.show();

2.寄生组合继承
主要是Desk.prototype = new Box(); Desk 继承了Box，通过原型，形成链条。主要通过临时中转函数和寄生函数实现。

临时中转函数：基于已有的对象创建新对象，同时还不必因此创建自定义类型
寄生函数：目的是为了封装创建对象的过程

//临时中转函数
function obj(o) { //o表示将要传递进入的一个对象
function F() {} //F构造是一个临时新建的对象，用来存储传递过来的对象
F.prototype = o; //将o对象实例赋值给F构造的原型对象
return new F(); //最后返回这个得到传递过来对象的对象实例
}
//寄生函数
function create(box, desk) {
var f = obj(box.prototype);
f.constructor = desk; //调整原型构造指针
desk.prototype = f;
}
function Box(name) {
this.name = name;
this.arr = [‘apple’,’pear’,’orange’];
}
Box.prototype.run = function () {
return this.name;
};
function Desk(name, age) {
Box.call(this, name);
this.age = age;
}
//通过寄生组合继承实现继承
create(Box, Desk); //这句话用来替代Desk.prototype = new Box();
var desk = new Desk(‘Lee’,100);
desk.arr.push(‘peach’);
alert(desk.arr);
alert(desk.run());