JS高级1面向对象

一字狂~

已于 2023-07-25 09:15:23 修改

阅读量376

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2023-07-24 20:08:32 首次发布

本文链接：https://blog.csdn.net/weixin_53560514/article/details/131897006

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章详细介绍了JavaScript中的面向对象编程，包括对象的概念、创建对象的四种方法（字面量、newObject、工厂函数、构造函数）、构造函数与实例对象的关系、原型的作用和原型链。此外，还讨论了内存管理、this的指向以及call()、apply()和bind()在改变this指向中的应用。

摘要由CSDN通过智能技术生成

一，面向对象的介绍

1.对象：

（1）对单个事物的抽象
（2）对象是一个容器，封装了属性和方法
（3）数据集和功能集
（4）无序属性的集合
|

2.面向对象

过程式封装代码，提高代码的开发效率和可维护性。面向对象不是面向过程的代替，而是面向过程的封装

3.面向对象的特征：（重点）

     封装性
     继承性
     多态性

二，创建对象的四种方法

/* （重点）
1、字面量创建
2、new Object()
3、工厂函数
4、构造函数
*/
创建手机对象，有牌子、颜色、内存属性、有喜欢玩的行为

1.字面量创建

   var phone = {
        type: "huawei",
        color: "black",
        neicun: "128",
        play: function () {
            console.log("玩游戏");
        }

    }
    console.log(phone);

2.new Object创建

   var phone = new Object()
   phone.type = "华为"
   phone.color = "black"
   phone.neicun = "128"
   phone.play = function () {
       console.log("玩游戏");
   }
   console.log(phone);

3.工厂函数创建

  function phone(type, color, neicun, play) {
        var phone = new Object()
        phone.name = name
        phone.color = color
        phone.neicun = neicun
        phone.play = play
        return phone
    }
    var phone1 = new phone("华为", "black", "128", function () { console.log("玩游戏"); })
    console.log(phone1);

4.构造函数创建

  function phone(type, color, neicun, play) {
        this.type = type
        this.color = color
        this.neicun = neicun
        this.play = play
    }
    var phone1 = new phone("华为", "black", "128", function () {
        console.log("玩游戏");
    })
    console.log(phone1);

三，构造函数与实例对象的关系

 function Car(name, color, run) {
        this.name = name
        this.color = color
        this.run = run
    }
       var car = new Car('奔驰', 'red', function () { console.log('可以跑'); })
       //constructor:构造函数；构造者；建造者
        /*
      任何对象都有constructor属性，实例化对象的constructor属性指向构造函数
    */
     //1.DOM对象
      console.log(document.getElementsByTagName('div')[0].constructor);
       ƒ HTMLDivElement() { [native code] }
     //2.BOM对象
       console.log(history.constructor);
        ƒ HTMLDivElement() { [native code] }
      //3.自定义
       var obj = {}
    console.log(obj.constructor)
    ƒ Object() { [native code] }
    //4.内置对象
     console.log(new Date().constructor); 
     ƒ Date() { [native code] }
     //5、数组
       var arr = []
    console.log(arr.constructor); 
     ƒ Array() { [native code] }
     // 6、函数
        var fun = function () { }
    console.log(fun.constructor); 
     ƒ Function() { [native code] }
     // 作用：判断数据类型

四，instanceof关键字

 // instanceof 判断数据类型
    // 变量名 instanceof Object
  function Car(name, color, run) {
        this.name = name
        this.color = color
        this.run = run
    }

   //实例化对象 
      var car = new Car('奔驰', 'red', function () { console.log('可以跑'); })
       console.log(car instanceof Object);
          // DOM
    console.log(document.getElementsByTagName('div')[0] instanceof Object);
     // BOM
    console.log(window instanceof Object);
      // 自定义
    var obj = {}
    console.log(obj instanceof Object);
    // 内置
    console.log(new Date() instanceof Object);
    // 数组
    var arr = []
    console.log(arr instanceof Object);
    // 函数
    var fun = function () { }
    console.log(fun instanceof Object)

五，内存浪费问题

1.js回收机制（自主回收）

内存的分配：变量的声明函数的声明
内存的使用：变量的使用函数的调用
内存的销毁：浏览器的关闭函数调用完成后

2. 内存浪费问题的解决：

        1、将公共的属性或者方法定义在全局
        2、原型

 var color="red"
 function Car(name, color, run) {
        this.name = name
        this.color = color
        this.run = run
    }
    var car1 =new Car('奔驰', color, run)

六，原型

1.原型的作用（重点）

    1、节省内存空间
    2、实现数据共享

2.构造函数实例化对象原型三者之间的关系

（1）任何函数都有prototype属性，它本身就是一个对象
（2）构造函数也是函数，也有prototype属性，我们称之为原型
（3）构造函数原型上的属性和方法，可以被实例化对象所继承
（4）任何对象都有constructor属性，实例化对象的constructor属性指向构造函数
（5）原型也是对象，有constructor属性，原型对象的constructor属性指向构造函数
（6）任何对象都有__proto__属性，它是一个指针，实例化对象的__proto__属性指向构造函数的原型
在这里插入图片描述

2.构造函数中this的指向

1、实例化对象调用，this指向实例化对象
2、原型对象调用，this指向原型对象

七，原型链最终指向了哪里

1.原型链：

    在javascript中每个对象都会有一个__proto__属性，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，
         那么它就会去__proto__里去找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，

2.原型链的最终指向：

null（重点）

3.字面量创建原型对象的问题：

原型对象constructor属性不指向构造函数
解决：直接添加constructor属性

4.原型链的查找规则：

    从本身到原型依次往下查找，如果有就返回，没有就返回undefined或者报错

八，改变this指向（重点）

1. call()

    1、可以进行函数的调用
    2、可以改变this的指向，没有参数，this指向window
    3、可以改变this的指向，如果有一个参数，this指向当前参数
    4、可以改变this的指向，如果有多个参数，this指向第一个参数，剩余的是参数列表

2.apply()

    1、可以进行函数的调用
    2、可以改变this的指向，没有参数，this指向window
    3、可以改变this的指向，如果有一个参数，this指向当前参数
    4、可以改变this的指向，如果有多个参数，this指向第一个参数，剩余的是数组

3. bind()

    1、不可以进行函数的调用
    2、可以改变this的指向，没有参数，this指向window
    3、可以改变this的指向，如果有一个参数，this指向当前参数