课程介绍复习创建对象的三种方式自定义构造函数创建对象工厂模式创建对象

最新推荐文章于 2021-09-18 20:38:41 发布

Leon_Jinhai_Sun

最新推荐文章于 2021-09-18 20:38:41 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/86607749

版权

课程介绍

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      /**
       * 课程介绍:
       * 原型及作用
       * 小案例--贪吃蛇
       * 继承
       * 高阶函数
       * 内置的方法
       * 正则表达式
       */
  </script>
  <script>
      /**
       * 1.复习--大量的时间----半个小时
       * 2.面向对象和面向过程的编程思想
       * 3.对象创建的三种方式
       * 原型的的引入----原型的作用
       * 原型的写法----重点
       * 实例对象和构造函数和原型对象三者之间的关系--重点
       * 体验面向对象的方式编程的思想--体验的案例--理解
       * 原型的简单的语法--注意的问题
       * 随机食物的产生----小例子--能够写出来
       */
  </script>
</head>
<body>
  
</body>
</html>

复习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      /**
       * JavaScript简称:JS
       * JS分是三个部分:
       * 1 ECMAScript标准----基础的语法
       * 2 DOM Document Object Model 文档对象模型
       * 3 BOM Browser Object Model 浏览器对象模型
       * 什么是JS?
       * 是一门脚本语言
       * 是一门解释性语言
       * 是一门弱类型语言
       * 是一门基于对象的语言
       * 是一门基于对象的语言
       *
       * 动态页面:页面由html+css+js
       * 向服务器发送请求,服务器那边没有页面,是动态的生成,返回给客户端
       *
       * js最初的目的:解决用户和服务器之间的交互问题
       * js做特效,游戏,移动端,服务端
       *
       *
       * 编程思想:
       * 面向过程:所有的事情都是亲力亲为,注重的是过程
       * 面向对象:提出需求,找对象,对象解决,注重的是结果
       * js不是一门面向对象的语言,是基于对象的语言,js来模拟面向对象
       * 面向对象的特性:继承,封装,多态,(抽象性)
       * 封装:就是包装,把一些重用的内容进行包装,在需要的时候,直接使用
       * 把一个值,存放在一个变量中,把一些重用的代码放在函数中,把好多相同功能的
       * 函数放在一个对象中,把好多功能的对象,放在一个文件中,把一些相同的内容放在
       * 一个对象中
       *
       * 继承:类与类之间的关系,js中没有类的概念,js中有构造函数的概念,是可以有
       * 继承的,是基于原型的
       *
       * 多态:同一个行为,针对不同的对象,产生了不同的效果
       * 
       */
  </script>
</head>
<body>
  
</body>
</html>

创建对象的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      // 对象:特指的某个事物,具有属性和方法(一组无序属性的集合)
      // 特征---->属性
      // 行为---->方法
      // 小苏:---->姓名,性别,年龄,吃,睡觉,玩

      // 创建对象的三种方式:

      // 1 字面量的方式
      // 2 调用系统的构造函数
      // 3 自定义构造函数

      // 实例对象
      // var per1 = {
      //     name:"卡卡西",
      //     age:20,
      //     sex:"男",
      //     eat:function(){
      //       console.log("吃臭豆腐");
      //     },
      //     readBook:function(){
      //       console.log("亲热天堂");
      //     }
      // };

      // // 调用系统的构造函数
      // var per2 = new Object();
      // per2.name = "大蛇丸";
      // per2.age = 29;
      // per2.sex = "男";
      // per2.eat = function(){
      //   console.log("吃榴莲");
      // };
      // per2.play = function(){
      //   console.log("这个小蛇真好玩");
      // };

      // function Person(){

      // }

      // console.log(per2 instanceof Object);

      // var dog = new Object();

      // 自定义构造函数
      function Person(name,age,sex){
          this.name = name;
          this.age = age;
          this.sex = sex;
          this.play = function(){
            console.log("天天打游戏");
          };
      }
      var per = new Person("周天",18,"女");
      console.log(per instanceof Person);

  </script>
</head>
<body>
  
</body>
</html>

自定义构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      function Person(name,age){
        this.name = name;
        this.age = age;
        this.sayHi = function(){
          console.log("您好");
        };
      }

      // 创建对象---->实例化一个对象,同时对属性进行初始化
      var per = new Person("小红",20);

      /**
       * 1.开辟空间存储对象
       * 2.把this设置为当前的对象
       * 3.设置属性和方法的值
       * 4.把this的对象返回
       * 
       */
  </script>
</head>
<body>
  
</body>
</html>

工厂模式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      function createObject(name,age){
          var obj = new Object();
          obj.name = name;
          obj.age = age;
          obj.sayHi = function(){
              console.log("您好");
          };
          return obj;
      }

      var per1 = createObject("小明",20);

      function Person(name,age){
        this.name = name;
        this.age = age;
        this.sayHi = function(){
          console.log("您好");
        };
      }

      // 创建对象---->实例化一个对象,同时对属性进行初始化
      var per = new Person("小红",20);

      /**
       * 共同点:都是函数,都可以创建对象,都可以传入参数
       * 
       * 工厂模式:
       * 函数名是小写
       * 有new,
       * 有返回值
       * new之后的对象是当前的对象
       * 直接调用函数就可以创建对象
       * 
       * 自定义构造函数
       * 函数名是大写(首字母)
       * 没有new
       * 没有返回值
       * this是当前的对象
       * 通过new的方式来创建对象
       * 
       */

  </script>
</head>
<body>
  
</body>
</html>

Leon_Jinhai_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课程介绍复习创建对象的三种方式自定义构造函数创建对象工厂模式创建对象

课程介绍<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.1.js"></script> <scrip...
复制链接

扫一扫