面向对象

优秀稳妥的吴大葱明汪
189 阅读6分钟

面向对象编程介绍

1.理解什么是面向对象编程

  • 面向对象不是一门技术，而是一种解决问题的思维方式
  • 面向对象的本质是对面向过程的一种封装

2.理解什么是对象

  • 对象的本质是程序代码与现实世界沟通的一座桥梁。它有两种含义

    • 对象：是一种数据类型（存储数据的容器），以键值对的形式存储数据
    • 对象：对现实世界实物的一种抽象。

今后实际开发中如何运用面向对象开发思维

  • 当拿来一个需求的时候，先不要急着写，而是去网上找有没有现成的框架。如果有，则下载CV搞定。如果没有再自己写。
    • 用别人的对象： 好处效率高 坏处不利于维护
    • 自己写的对象： 好处维护方便 坏处效率低

内置对象api

  • 学习传送门：www.runoob.com/jsref/jsref…

  • 内置对象api： js作者提前写好的对象，里面有一些预先定义的方法，我们直接使用即可，无需关心原理

    • api : 预先定义的函数

  • 学习内置对象： 不需要死记硬背，忘记了随时查阅文档。 用多了自然就记住了，熟能生巧

数组对象api

数组的增删改查操作 
    新增元素到最后面 ： arr.push( 元素 )
    新增元素到最前面 ： arr.unshift()
    删除最后一个元素 ： arr.pop()
    删除第一个元素   ： arr.shift()
    删除指定位置元素 ： arr.splice(起始下标,删除数量)

(1) arr.concat(数组) ： 把两个数组连接成一个数组
应用场景： 一般用于长列表(下一页),不断往后面拼接数组

(2) arr.reverse() : 翻转数组
应用场景： 价格从低到高 切换成 从高到低， 只需要翻转数组即可

(3) arr.join('分隔符') : 把数组每一个元素拼接成字符串
应用场景 : 有些歌曲是多个人合唱，服务器会给我们一个数组。 这个时候就需要将数组元素通过join拼接起来然后再页面显示

(4) arr2.sort(function(a,b){
  //return a-b//从小到大
  //return b-a//从大到小})  : 排序

字符串对象api

1.字符串类似于数组也有下标

2.str.indexOf('字符串') 获取'字符串'在str中的首字母下标
  如果字符串存在则返回首字母下标,如果不存在则返回固定值-1
  应用场景: 一般用于判断str中是否有某个字符串

3.str.split('分隔符') 用分隔符切割字符串,得到切割后的数组
  应用场景: 一般用于解析网址

4. str.substr(起始下标,截取长度) 截取字符串
   应用场景: 一般后台返回的数据不会和前端完全匹配 需要自己截取一部分

5. 大小写转换  (中文没有大小写)
   应用场景: 字母验证码不区分大小写
   console.log('abcDEFG'.toLocaleLowerCase())//小写
   console.log('abcDEFG'.toLocaleUpperCase())//大写

原型对象

1.原型对象是什么?

  • 任何函数在声明的时候,系统会自动帮你创建一个对象,称之为原型对象

2.原型对象的作用

  • 用来解决 内存浪费 + 变量污染

3.原型对象相关三个属性: 描述 构造函数 原型对象 实例对象

三者关系

  • prototype: 属于构造函数,指向原型对象
  • proto(实际开发中不用): 属于实例对象,指向原型对象
  • constructor:属于原型对象,指向构造函数

工厂函数

用于批量创建对象的函数

使用函数创建对象 : 解决创建多个对象代码冗余
工厂函数 ： 
function createPerson (name, age, sex) {
  //(1)创建空对象
  let p = {}
  //(2)对象赋值
  p.name = name
  p.age = age
  p.sex = sex
  //(3)返回创建好的对象
  return p
}

构造函数 (重点)

1.构造函数 :  使用new调用一个函数
    构造函数作用与工厂函数一致，都是用来创建对象的。但是代码更加简洁。
2.构造函数new工作原理
    (1)创建空对象
    (2)this指向这个对象
    (3)对象赋值
    (4)返回这个对象
3.构造函数new在使用时需要注意的地方
    3.1 构造函数首字母一般大写, 为了提醒调用者不要忘记new关键字
    3.2 如果在构造函数内部 手动return
        return 值类型  ： 无效,还是返回new创建的对象
        return 引用类型  ： 有效，会覆盖new创建的对象

function Person(name,age,sex){
    //(1)创建空对象   {}
    //(2)this指向这个对象  this = {}
    //(3)对象赋值
    this.name = name
    this.age = age
    this.sex = sex
    //(4)返回这个对象 return this
}
let p1 = new Person('张三',20,'男')

构造函数new的工作原理

1000.gif

原型对象

  • 原型：任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称之为原型对象

    • 同时解决内存浪费与全局变量污染的问题

  • 谁可以访问原型对象中的成员(属性和方法)

    • 构造函数自身：构造函数名.prototype
    • 构造函数实例化的每一个对象：点语法直接访问
      /* 1 原型 ： 每一个构造函数在声明的时候，系统会自动的创建一个与之对应的对象，
      称之为原型对象
      */
      function Person(name,age){
          this.name = name;
          this.age = age;
      };
      /*2 如何获取原型对象 
          每一个函数都有一个 prototype 属性，指向这个原型对象
      */
     console.log(Person.prototype);
     /* 
     3 既然原型是一个对象 ： 用于存储数据
     */
    Person.prototype.sayHi = function(){
        console.log('坤坤我爱你');
        
    };
    /* 
   4 谁可以访问 原型中的成员（属性+方法）
      a. 构造函数自身 ： 构造函数名.prototype
      b. 这个构造函数所创建(实例化)的每一个对象
    */
   // 实例化对象
   let p1 = new Person('班长',18);
   p1.sayHi();
   //实例化对象
   let p2 = new Person('班花',20);
   p2.sayHi();
   console.log(p1.sayHi === p2.sayHi);//true

__ proto__ 属性介绍

  • 1.属于实例对象，指向实例化这个对象的构造函数对应的原型

    • 可以让实例对象访问原型中的

  • 2.proto属性不是W3C的标准属性，所以实际开发中一般不会使用它来访问原型

constructor属性介绍

  • constructor : 属于原型对象，指向构造函数

    作用：可以让实例对象知道自己被那个构造函数创建的

静态成员与实例成员

构造函数也可以有自己的属性： 例如prototype

静态成员 ： 属于函数对象的成员
实例成员： 属于实例化对象的成员
avatar
文章
阅读
粉丝