JavaScript--面向对象

1.创建对象

1.字面量方式创建对象

var obj={
    name:'Jack',
    age:18,
    sayHai:function(){
        console.log('hello world')
    }
}

2.内置构造函数创建对象

var obj=new Object()
obj.name='Jack'
obj.age=18
obj.sayHai=function(){
    console.log('say hello world')
}

3.工厂函数创建

//1.制造一个工厂函数
//2.使用工厂函数创建

function createObj(){
    //手动创建一个对象
    var obj={}
    //手动向里面添加属性
    obj.name='Jack'
    obj.age=18
    obj.sayHi=function(){console.log('say hello world')}
    //手动返回这个对象
    return obj
}

//使用工厂函数去创建对象
var obj1 = createObj()
var obj2 = createObj2()

4.自定义构造函数创建对象

//1.制造一个自定义构造函数
//2.使用自定义构造函数制造对象

//制造自定义构造函数,构造函数会自动创建对象,自动返回这个对象
function createObj(name,age){
    //自动创建对象
    
    //手动向对象里面添加成员
    //这里的this指向当前实例(new 前面的变量)
    this.name=name
    this.age=age
    this.sayHai = function(){
        console.log("hello world")
    }
    
    //自动返回对象
    
}

//使用自定义构造函数制造对象
var obj1 = new createObj('Jack',18)
var obj2 = new createObj('Rose',20)

2.构造函数的使用

//1.构造函数和普通函数没有区别,只不过在调用的时候与new关键字一起使用
//2.书写构造函数,函数名首字母大写,这样当你看到名字的时候,就知道要和new关键字连用
//3.调用的时候,需要和new关键字连用,因为只有和new关键字连用的时候,这个函数才会有自动创建和返回对象的能力,因为我们之所以写构造函数,就是为了使用它去批量生产对象,如果不和new关键字连用,那么该函数没有创建对象的能力,,没有自动返回对象的能力
//4.调用构造函数的时候,如果不需要写参数的时候,可以不写最后的小括号,但是一般建议都写小括号
//5.当你的函数名和new关键字连用的时候,函数内部的this指向当前实例(new 关键字前面的变量),我们直接在函数体内写的this.xxx=值就是在向自动创建出来的对象里面添加内容
//6.构造函数里面不要写return,如果返回基本数据类型,那么返回值实际上还是这个对象,如果是复杂数据类型(数组等),返回对象就是复杂数据类型

function person(){
    console.log('hello world')
}
function Person(){
    this.name='jack'
}

var obj

  • 构造函数的不合理之处
   + 当你在构造函数体内书写方法的时候
      => 你需要向对象上添加方法的时候
      => 只要创建一次对象(new 一次) 就会有一个函数在占用空间
      => 创建 100 次对象, 会有 100 个一模一样的函数出现
    + 100 个函数一模一样
      => 但是其实里面有 99 个是重复的, 没有必要存在

原型

  原型 prototype
    + 定义: 每一个函数天生自带一个属性, 叫做 prototype, 是一个对象
    + 构造函数也是函数, 也会有这个自带的空间 prototype
    + 既然 prototype 是一个对象, 我们就可以使用对象操作的语法, 向里面添加一些内容

  对象
    + 定义: 每一个对象, 在你访问他的成员的时候, 如果自己没有这个属性
      => 会自动去所属构造函数的 prototype 上查找
    + 自定义构造函数创建的对象也是对象, 当你访问某一个成员的时候
      => 如果没有, 也会自动去所属构造函数的原型上查找
      => 哪一个构造函数创建的对象, 这个对象就属于哪一个构造函数
      => 因为构造函数在创建对象的过程, 我们起名为 实例化 的过程
        -> 创建出来的对象叫做这个构造函数的一个 实例化对象
  function Person() {}

    Person.prototype.sayHi = function () { console.log('我是 Person 原型上的方法') }

    console.log(Person.prototype)

    // 创建一个实例化对象
    // 因为 p1 是 Person 实例化出来的对象
    // p1 就是属于 Person 这个构造函数的
    // 当你访问 p1 的 sayHi 成员的时候, p1 自己是没有的
    // 会自动去 Person 的 原型(prototype) 上查找
    var p1 = new Person()
    console.log(p1)
    p1.sayHi()

    // 创建第二个实例化对象
    // 因为 p2 也是 Person 的实例化对象
    // p2 没有 sayHi 成员, 也会自动去 Person 的原型上查找
    var p2 = new Person()
    console.log(p2)
    p2.sayHi()

    /*
      p1 的 sayHi 方法和 p2 的 sayHi 方法都是使用的 Person 构造函数的原型上的方法
      我只要向 Person 的原型上添加一些方法
      所有的 Person 的每一个实例都可以使用
      并且使用的都是同一个函数, 不会出现浪费空间的行为
    */
   console.log(p1.sayHi === p2.sayHi) // true 说明是一个函数

选项卡案例

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .tab {
      width: 600px;
      height: 400px;
      border: 10px solid #333;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    ul {
      height: 60px;
      display: flex;
    }

    ul > li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: #fff;
      background-color: skyblue;
      cursor: pointer;
    }

    ul > li.active {
      background-color: orange;
    }

    ol {
      flex: 1;
      position: relative;
    }

    ol > li {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 100px;
      color: #fff;
      background-color: purple;
      display: none;
      justify-content: center;
      align-items: center;
    }

    ol > li.active {
      display: flex;
    }


  </style>
</head>
<body>

  <div class="tab" id="box">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
  <div class="tab" id="box2">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>

  <script>
    /*
      简单版面向对象选项卡

      1. 抽象内容
        + 一个能够完成选项卡的对象, 需要有哪些属性和方法
        + 属性: 所有可以点击的按钮盒子
        + 属性: 所有可以切换的选项盒子
        + 方法: 能添加点击事件的方法
      2. 书写构造函数
        + 能创建一个对象, 包含两个属性和一个方法
        + 属性直接写在构造函数体内
        + 方法写在构造函数的原型上
    */

    // 2. 书写构造函数
    function Tabs(ele) {
      // 范围
      this.ele = document.querySelector(ele)
      // 在范围内找到所有可以点击的盒子
      this.btns = this.ele.querySelectorAll('ul > li')
      // 在范围内找到所有需要切换显示的盒子
      this.tabs = this.ele.querySelectorAll('ol > li')
    }

    // 原型上书写方法
    Tabs.prototype.change = function () {
      // 执行给所有 btns 里面的 按钮添加点击事件
      // 我怎么拿到 btns
      // 绝对不能直接使用 t 这个变量
      // console.log(this.btns)

      // 提前保存一下 this
      var _this = this

      for (var i = 0; i < this.btns.length; i++) {
        // 提前保存索引
        this.btns[i].setAttribute('index', i)

        this.btns[i].addEventListener('click', function () {
          // console.log('我被点击了')
          // 需要让实例的 btns 里面的每一个没有 active 类名
          // 需要让实例的 tabs 里面的每一个没有 active 类名
          // 这里不是在 change 函数的作用域了, 而是事件处理函数的作用域
          // 在事件处理函数里面, this 指向当前事件的事件源
          // console.log(_this)
          // 当你访问 _this 的时候, 其实是在访问变量
          // 自己作用域没有, 就会去上一级作用域查找
          for (var j = 0; j < _this.btns.length; j++) {
            _this.btns[j].className = ''
            _this.tabs[j].className = ''
          }

          // 当前点击的这个 li 有 active 类名
          this.className = 'active'
          // 让 实例身上的 tabs 里面索引对应的哪一个 li 有 active 类名
          // 拿到当前 li 身上保存的 索引
          var index = this.getAttribute('index') - 0
          _this.tabs[index].className = 'active'
        })
      }
    }

    // 使用的时候
    // 选项卡就可以使用了
    var t = new Tabs('#box')
    // 实例对象在调用方法
    // 函数调用方式, 对象.函数名()
    // 函数内部的 this 就是指向 点 前面的 xxx
    // 我在 change 函数里面写的 this 就是 t
    t.change()

    // 实现第二个选项卡
    var t2 = new Tabs('#box2')
    t2.change()
  </script>
</body>

3.原型和原型链

1.原型

  • 仅使用构造函数

在这里插入图片描述

  • 原型

在这里插入图片描述

  • p1.__prpto__==Person.prototype
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      解决问题
        + 原型
          => 概念: 每一个构造函数天生自带一个 prototype 属性, 是一个对象数据类型
          => 概念: 每一个对象天生自带一个属性 __proto__, 指向所属构造函数的 prototype
          => 概念: 当你访问对象的成员的时候, 首先在自己身上查找, 如果没有, 自动去到 __proto__ 上查找
        + 如何解决问题
          => 我们把需要添加给实例的方法, 放在构造函数的原型(prototype)上
          => 就可以有实例进行访问使用
        + 原型:
          => 构造函数天生自带的一个 prototype
          => 作用: 有构造函数添加方法, 专门给实例对象使用
    */

    // 当函数被书写完毕以后
    // 就会有 prototype 出现
    // function Person() {}

    // // 直接向 prototype 内添加一些成员
    // Person.prototype.a = 100
    // Person.prototype.b = 200

    // console.log(Person.prototype)

    // // 创建一个实例对象
    // // p1 所属的构造函数就是 Person
    // // p1.__proto__ === Person.prototype
    // var p1 = new Person()
    // console.log(p1.__proto__ === Person.prototype)
    // console.log(p1.__proto__)


    // // 当你访问 p1 的 a 成员
    // // 因为当你访问 p1.a 的时候, 自己没有, 会自动去自己的 __proto__ 上查找
    // // 又因为 自己的__proto__ 就是 Perosn.prototype
    // // 所以, 其实就是去到 Person.prototype 上查找
    // console.log(p1.a)



    function Person(name, age) {
      // 向实例对象上添加属性
      this.name = name
      this.age = age

      // 向实例对象上添加方法
      // this.sayHi = function () { console.log('hello world') }
    }

    // 把想添加给实例对象的方法, 书写原型上
    Person.prototype.sayHi = function () { console.log('hello world') }


    // 创建实例对象
    // p1 和 p2 所属的构造函数都是 Person
    // p1.__proto__ === Person.prototype
    // p2.__proto__ === Person.prototype
    var p1 = new Person('Jack', 18)
    var p2 = new Person('Rose', 20)

    console.log(p1)
    console.log(p2)
    console.log(p1.__proto__ === Person.prototype)
    console.log(p2.__proto__ === Person.prototype)

    // 当你访问 p1 的sayHi 的时候
    // 自己没有, 回去自己的 __proto__ 上找
    console.log(p1.sayHi)

    // 当你访问 p2 的sayHi 的会搜
    // 自己没有, 会去自己的 __proto__ 上找
    console.log(p2.sayHi)

    // 因为 p1.__proto__ 和 p2.__proto__ 是一个对象空间
    // p1 和 p2 的 sayHi 是一个
    console.log(p1.sayHi === p2.sayHi)
  </script>
</body>

2.原型链

在这里插入图片描述

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script>
    /*
      问题1: 实例对象身上的 __proto__ 指向谁 ?
        => 指向所属构造函数的 prototype
        => p1 所属的构造函数是 Person
        => p1.__proto__ 指向 Person.prototype
      问题2: Person.prototype 的 __proto__ 指向谁 ?
        => Person.prototype 所属的构造函数是谁
        => 因为 Perosn.prototype 是一个对象数据类型(Object)
        => 在 JS 内所有的 Object 数据类型都是属于 Object 这个内置构造函数
        => Person.prototype 是属于 Object 这个内置构造函数的
        => Person.prototype 的 __proto__ 指向 Object.prototype
      问题3: Person 的 __proto__ 指向谁 ?
        => Person 是一个函数, 函数本身也是一个对象, 就会有 __proto__
        => 在 JS 内, 所有的函数都是属于内置构造函数 Function 的实例
        => Person.__proto__ 指向 Function.prototype
      问题4: Object.prototype 的 __proto__ 指向谁 ?
        => Object.prototype 是一个对象数据类型, 只要是对象, 都是数据 Object 这个内置构造函数的
        => 注意: Object.prototype 在 JS 内叫做顶级原型, 不在有 __proto__ 了
        => Object.prototype 的 __proto__ 指向 null
      问题5: Object 的 __proto__ 指向谁 ?
        => Object 是内一个内置构造函数, 同时也是一个函数, 同时也是一个对象
        => 在 JS 内, 所以的函数都是属于内置构造函数 Function 的实例
        => Object 也是 Function 的实例
        => Object.__proto__ 指向 Function.prototype
      问题6: Function.prototype 的 __proto__ 指向谁 ?
        => Function.prototype 也是一个对象数据类型
        => 只要是对象数据类型都是 Object 的实例
        => Function.prototype 的 __proto__ 指向 Object.prototype
      问题7: Function 的 __proto__ 指向谁 ?
        => Function 也是一个内置构造函数, 也是一个函数
        => 在 JS 内, 所有的函数都是属于内置构造函数 Function 的实例
        => Function 自己是自己的构造函数
        => Function 自己是自己的实例对象
        => Function 所属的构造函数的是 Function

      原型链
        + 用 __proto__ 串联起来的对象链状结构
        + 注意: 使用 __proto__
        + 每一个对象数据类型, 都有一个属于自己的原型链
        + 作用: 为了访问对象成员

      对象访问机制:
        + 当你需要访问对象的成员的时候
        + 首先在自己身上查找, 如果有直接使用
        + 如果没有, 会自动去 __proto__ 上查找
        + 如果还没有, 就再去 __proto__ 上查找
        + 直到 Object.prototype 都没有, 那么返回 undefined
    */

    function Person() {}

    var p1 = new Person()

  </script>
</body>
  • 注:之后会使用ES6的语法写类,这里只是简要说明一下JavaScript面向对象的思想
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值