JS高级第1天

阶段目标

主要学习 JS 的面向对象编程思想。

对象

概念

在编程领域，任何事和物都可以概括成对象。

对象概念练习

用编程思想抽象出你心仪对象的属性和方法。

对象由属性和方法组成，属性和方法都可以用键值对定义。

心仪对象：

属性：特征

身高：150 cm

年龄：36

性别：女

腿：大长腿

方法：功能 - 函数

生活技能：煮饭

运动技能：打篮球

艺术技能：rap

<!DOCTYPE html>

<html lang="en">

<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>

    // 创建一个对象

    var person = {

      // 对象的属性 - 特征

      height: "170cm",

      age: 36,

      sex: "女",

      leg: "大长腿",

      // 生活技能

      // 对象的方法 - 功能，技能，函数

      liveSkill:function(){

        console.log('生活技能: 煮饭');

      },

      sportSkill:function(){

        console.log("运动技能：打篮球");

      },

      artSkill:function(){

        console.log('艺术技能：rap')

      },

    }

    console.log(person);

    // 编程中的对象主要是对 事 和 物进行了概括

    // 编程的时候要把特征和功能书写到对应的键值对中

    // 方法：就是代表某个功能，该功能是可以反复调用的

    // 对象是无序的，不需要管输出顺序，只需要管书写顺序，数组是有序的

  </script>

</body>

</html>

面向过程和面向对象

面向对象三大特征

面向对象三大特征：封装，继承和多态。

注意：JS不支持多态，我们 JS 的面向对象主要是封装和继承。

面向过程编程

想到什么写什么，按照需求一步步实现，不需要把项目的元素抽离成对象。

面向对象编程

分析页面中哪些元素可以抽离成对象
分析对象的属性
分析抽象对象的方法
按照需求一步步实现

小结

面向过程书写简单，但是修改起来麻烦。

面向对象书写复杂，但是后期加功能，或者修改功能较为方便。

工厂函数

目标

利用工厂函数创建多个对象

概念

工厂函数其实就是把创建对象的过程用一个函数进行了封装。函数内部创建对象，并把对象返回。

参考代码 1

function createPerson(name, age) {

    // 函数内部创建一个 person 对象

    var person = {

        // 对象的属性

        name: name,

        age: age,

        // 对象的方法

        sayHi: function () {

            console.log(this.name + ",666");

        }

    }

    // 把函数内部的对象返回

    return person;

}

// 调用函数创建 大白 对象

var p1 = createPerson("大白", 2);

// 调用函数创建 大黑牛 对象

var p2 = createPerson("大黑牛", 18);

// 输出两个对象

console.log(p1, p2);

参考代码 2

function createPerson(name, age) {

    // 创建一个空对象

    var person = new Object();

    // 给对象添加属性

    person.name = name;

    person.age = age;

    // 给对象添加方法

    person.sayHi = function () {

        console.log("我是" + this.name + "，我很666");

    }

    // 函数内部返回创建的对象

    return person;

}

// 调用函数创建 超人 对象

var p1 = createPerson("超人", 100);

// 再调用函数创建 蝙蝠侠 对象

var p2 = createPerson("蝙蝠侠", 30);

// 输出对象

console.log(p1, p2);

// 调用对象的方法

p1.sayHi();

小结

工厂函数需要在函数内部手动创建对象。
工厂函数需要设置返回值，返回创建的对象。

构造函数 *

目标

利用构造函数方式创建对象

概念

构造函数其实也是函数，用于创建对象，多次调用能创建多个不同的对象。

参考代码

function Person(name, age) {

    debugger;   // 断点调试，函数内部自动创建 this 对象

    // var person = new Object();

    this.name = name;

    this.age = age;

    this.sayHi = function () {

        console.log("我是" + this.name + "，我很666");

    }

    // return person;    // 不需要设置返回值，自动返回 this 对象

}

var p1 = new Person("超人", 100);

var p2 = new Person("蝙蝠侠", 30);

console.log(p1, p2);

功能：构造函数也是个函数，用于创建多个对象。

构造函数和工厂函数区别

	构造函数 *	工厂函数
函数名称	首字母大写	驼峰命名
在函数内部，是否需要创建对象	不需要	需要创建对象
在函数内部，是否需要设置返回值	不需要	需要返回创建的对象
在调用的时候，是否需要 new 关键词	需要 `new` 关键词	不需要，普通函数调用

构造函数创建对象更方便，推荐使用。

注意：如果构造函数忘记了些 new 关键词，JS 会把他当做普通函数执行。

普通函数内部的 this 默认指向 window 对象。

小结

构造函数相对于工厂函数来说更多人使用。推荐大家也使用构造函数创建对象。

new 的功能

目标

了解 new 主要的功能

概念

new 在构造函数内部主要有以下功能。

函数内部创建一个新对象 this
函数最后把对象返回 return this

所以调用 构造函数 的时候一定要记得 new 关键词。

 // 创建构造函数

function Person(name, age) {

    // var person = new Object();

    this.name = name;

    this.age = age;

    this.sayHi = function () {

        console.log("我是" + this.name + "，我很666");

    }

    // return person;

}

var p1 = new Person("超人", 100);

var p2 = new Person("蝙蝠侠", 30);

console.log(p1, p2);

原型关系图

目标

梳理构造函数，实例对象，原型对象的关系

参考关系图

注意三个关键术语

构造函数 - 用于创建对象的函数
实例对象 - 调用构造函数创建出来的对象
原型对象 - 构造函数和实例对象都有原型

注意：原型方法是《共享》的，书写的时候写到《构造函数》上，给《实例对象》使用。

小结

构造函数相当于妈妈，(妈妈主要是用于添加属性的)

原型对象相当于爸爸，(JS自动给妈妈分配了个老公，主要用于添加方法的)

实例对象相当于孩子，(通过妈妈创建孩子，孩子有妈妈的属性，有爸爸的方法)

面向对象编程步骤：

分析项目中有什么对象，抽离成对象。
分析对象的属性 - 属性写到构造函数的内部
分析对象的方法 - 方法写到构造函数的原型
用 new 关键词调用构造函数，创建实例对象。
封装的功能写到方法上，实例对象调用方法激活功能。

案例

<!DOCTYPE html>

<html lang="en">

<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>

    #map {

      margin: 0 auto;

      width: 800px;

      height: 400px;

      background-color: #333;

      position: relative;

    }

  </style>

</head>

<body>

  <div id="map"></div>

  <script>

      // 创建构造函数

      function Food(width,height,top,left,backgroundColor){

        // 创建属性

        this.width = width;

        this.height = height;

        this.top = top;

        this.left = left;

        this.backgroundColor = backgroundColor;

        this.element = null;

      }

      // 在构造函数内创建原型对象以便给实例对象共享

      // 封装生成食物标签的函数

      Food.prototype.render = function(){

        // 创建食物标签

        var map = document.querySelector('#map');

        var foodTag = document.createElement('div');

        map.appendChild(foodTag);

        this.element = foodTag;

        // 给食物标签初始化样式

        this.element.style.width = this.width + "px";

        this.element.style.height = this.height + "px";

        this.element.style.top = this.top + "px";

        this.element.style.left = this.left + "px";

        this.element.style.backgroundColor = this.backgroundColor;

        this.element.style.position = "absolute";

      }

      // 抽离生成随机数的方法

      function getRandomNum(num){

        return Math.floor(Math.random() * (num + 1));

      }

      // 封装获取随机位置的方法

      Food.prototype.getRanPos = function(){

        this.left = getRandomNum(780/20) * 20;

        this.top = getRandomNum(380/20) * 20;

        this.element.style.left = this.left + "px";

        this.element.style.top = this.top + "px";

      }

      // 封装获取颜色随机值的方法

      Food.prototype.getColor = function(){

        var color1 = getRandomNum(255);

        var color2 = getRandomNum(255);

        var color3 = getRandomNum(255);

        this.backgroundColor = "rgb(" + color1 + "," + color2 + "," + color3 + ")";

        this.element.style.backgroundColor = this.backgroundColor;

        console.log(this.backgroundColor);

      }

      // 封装点击更换位置以及颜色的方法

      Food.prototype.bindHandle = function(){

        // 如果看不懂，自己console.log查看that和this是代表什么

        var that = this;

        this.element.addEventListener('click', function(){

          that.getRanPos();

          that.getColor();

        })

      }

      // 调用函数方法创建实例对象

      var food1 = new Food(20,20,0,0,'pink');

      food1.render();

      food1.bindHandle();

      console.dir(Food);

  </script>

</body>

</html>