JavaScript 面向对象

Posted 2022-07-16 qirui-

1. 什么是对象？

       对象object 是一些相关的变量和方法的软件集。

       特性： 属性和方法

       javascript中的所有事物都是对象。

       创建对象的方法：

1. 字面量
2. new Object()  创建
3. 自定义构造函数
4. Object.create() 创建
5. 工厂函数

var obj = new Object();
// obj是对象，Object是类
// 对象是类的实例和具体，类是对象的集合

         建立一个工厂函数

function createStudent(name,age,ClassName)
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.ClassName = ClassName;
            obj.study = function()
                console.log("学习Css");
            
            return obj;
        

        var ming=  createStudent("明",20,"1811");
        var hong=  createStudent("红",21,"1811");

// 可以很好减少代码量

 

2.什么是面向对象？

        面向对象是一个思想，就是把解决问题的注意力集中到对象上。

        面向对象的三大特点：封装 继承 多态。    

        封装：把所有相关的属性和方法封装在一个对象里。
        继承：自己没有的属性或者方法，可以把别的拿过来用
        多态：不同的对象根据事件情况，执行代码不同。js可以模拟实现。

3.常用的内置对象（构造函数）

Number String Boolean
Array Date Math RegExp
Function Object
Global Error

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

var arr = new Array();
// arr 是对象，Array 是类。 对象是由类所构造的。
// Array() 是构造函数

       把工厂函数变换成构造函数

function createStudent(name,age,ClassName)
            this.name = name;
            this.age = age;
            this.ClassName = ClassName;
            this.study = function()
                console.log("学习Css");
            
            return obj;
        

        var ming= new createStudent("明",20,"1811");
        var hong= new createStudent("红",21,"1811");

         ming.study();
         hong.study();

         // ming 是对象  createStudent是类  createStudent是构造函数
         // 类的本质还是函数
        

 

4.原型对象

         js就是基于原型的对象。

function Person()


var xiaoming = new Person();
//1. 每个类（函数） 天生有一个prototype 的属性，创建了一个对象，而这个对象的就是这个函数的原型，这个对象里有个constructor(构造函数) 的属性，属性值是类本身。
//2. 我们所有new 一个类的时候，其实是调用它的构造函数。构造函数里的属性都是私有的，构造函数里的this都是实例对象。
//3. 每个对象上天生有一个__proto__ ，指向类的原型。

 

5.原型链

          原型链： 由各级对象的__proto__逐级继承形成的关系。

          原型链的作用也是节省空间。

          __proto__和prototype:

                 1.  prototype 是类的或者函数的， __proto__ 是对象的。
                 2.  __proto__是查找机制 ,prototype是存储机制。

function Person(name,age)  
        this.name= name;


 var zhang = new Person("zhang");
 console.log(zhang.name);  //zhang
 console.log(zhang.age);  //undefined

//当zhang 查找某个属性时(比如:name)：
//zhang 这个对象首先看name 是私有的，是就直接使用，不是的就通过 __proto__ 往它的 //类的prototype 上查找，有就直接使用，没有就继续向上查找，直到查找到基类object ,没有 //就是undefined  ,有就直接使用。这种查找机制 叫原型链。

// 所以zhang.name 返回的是zhang，而zhang.age 返回undefined

 

6.继承

         

// 父类
function Person(name)
     this.name = name;
     this.eat= function()
      console.log("chi");


Person.prototype.age = 10; // 添加原型属性

         1. 原型继承

function Son()
      this.age = 23;

var p1 = new Person("zhang");
Son.prototype = p1;
var s1 = new Son;
console.dir(s1.name); // zhang

// 将父类的实例赋值给子类的原型：私有的公有的都继承为共有的。

 

       2. call继承 (call方法是函数/类天生自带的一个方法。);

       

function Son()
      this.age = 23;
      Person.call(this,"123"8);

var p1 = new Person("zhang");
var s1 = new Son;
console.log(s1.age); // 23
console.log(s1.name); // 123

//只继承了父类构造函数的属性，没有继承父类原型的属性。

        3. 冒充对象继承

var p1 = new Person("zhang");

for(var key in p1)
        console.log(key); //name in 


// 将父类私有的和公有的都继承为子类私有的 使用for in
// for in 可以遍历对象的共有属性fn就是公有的

 

        4. 混合继承  (call 继承和原型继承的结合)

// 父类
function Person(name)
     this.name = name;

Person.prototype.age = 10; // 添加原型属性

var p1 = new Person;
function Son() 
   Person.call(this); // 私有的继承为私有的了

Son.prototype=p1;
var s1 = new Son;
console.log(s1); // zhang

// 私有的继承为私有的 私有的和公有的再次继承为公有的。

 

         5. 组合继承

         

         // 父类
        function Person()   
            this.name ="zhang";
        
        Person.prototype.fn=function()
            console.log(111);
        
        var p = new Person;

         // 子类
        function Son()
            Person.call(this);
        
        Son.prototype=Object.create(Person.prototype);
        var s = new Son;
        s.__proto__.fn=function()
            console.log(222);
        
        s.fn(); //222
        p.fn(); //111

          6.  中间类继承

           

function fn(a,b,c)
            arguments.__proto__ = Array.prototype;
            arguments.push(89);
            console.log(arguments);

fn(45,56,23); //45,56,23,89