first js高级 对象的创建 函数的创建 原型

复习

• 动态页面：

  • 页面由html+css+js
  • 向服务器发送请求，服务器那边没有页面，是动态生成的，返回给客户端

• 基本数据类型

  • undeifend
  • boolean
  • string
  • null
  • number

• 复杂类型

  • object
  • Array
  • Date
  • function
  • RegExp

• 类型检测

  • typeof

    typeof用以获取一个变量或者表达式的类型，typeof一般只能返回如下几个结果：
    
    number,boolean,string,function（函数）,object（NULL,数组，对象）,undefined。
    

    if (typeof(document.MapCheckMgr.checkid)!=“undefined”)

    typeof (123)

    我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因为如果a不存在（未声明）则会出错
    

  • instanceof

    当我们要判断一个对象是否是数组时
    
    或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法instanceof
    

    nstanceof用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，
    
    同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。
    
    再如：function test(){};var a=new test();alert(a instanceof test)会返回true。
    

  • object.prototype.toString.call()

• 值类型于引用类型

  值类型传递的是值 引用类型传递的是地址

• 变量

  不用var是隐式全局变量

• 形参 实参

• property 属性 method方法

• 对象

  实际开发中，对象是一个抽象的概念： 可以简单的理解为： 数据集或功能集

  数组 函数 对象 都是对象的的子集 也是属于对象

• 编程思想

  • 面向过程 ：所有事情都是亲力亲为，注重的是过程

  • 面向对象： 提出需求，找对象，对象解决，注重的是结果

    js不是一门面向对象的语言，是基于对象的语言 模拟面向对象

• 面向对象的特性

  封装 继承 多态，抽象性

  • 封装：就是包装，重用的东西进行封装，在需要的时候进行调用，直接使用，

  ​ 把一个值，存放在一个变量中，把一些重用的代码放在函数里面，把好多相同功能

  的函数放在一个对象中，把好多功能的对象，放在一个文件中，把一些相同的内容放在一 个对象

  • 继承

    类与类之间的关系，js没有类的概念，js中有构造函数的概念，是可以有继承的，是基于原型

  • 多态： 同一个行为，针对不同的对象，产生不同的效果

  所有的构造函数相当一个虚拟的东西 真正能看得到就是实例对象

三种创建对象的方式

对象： 特指的某个事物，具有属性和方法 （一组无序属性的集合）

• 字面量的方式

  var per1 = {
          name: "kakxi",
          age: 20,
          sex: "男",
          eat: function() {
              console.log("吃饭土豆");
          };
          readBook: function() {
              console.log("琴");
          }
      }
  

• 调用系统构造函数

  var per2 = new Object();
      per2.name = "kakak";
      per2.age = 20;
      per2.sex = "男";
      per2.play = function() {
          console.log("玩?");
      }
      function person(){
  
      }
      console.log(per2 instanceof person);
  得到的结果是false
  只能判断是否是对象  不能判断是否为人这种类型
  

  第一种和第二种都是同样的结果

• 在定义构造函数的方式

function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.paly = function() {
            console.log("天安游戏");
        };

    }
    //创建对象---->实例化一个对象,的同时对属性进行初始化
    var per = new Person("张三", 20, "男");
    console.log(per instanceof Person);

这个可以判断具体是哪一类的

工厂模式和自定义构造函数的区别

• 自定义构造函数

​ 实例对象

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

• 工厂模式创建对象

  function createObject(name, age) {
          var obj = new Object();
          obj.name = name;
          obj.age = age;
          obj.sayHi = function() {
              console.log("您好");
          };
          return obj;
     }
     //实例化
     var per2 = createObject("小明", 20);
  

• 两者之间的区别

  工厂模式函数名是小写的 自定义函数名的首字母是大写的

  工厂模式的函数 有返回值 自定义函数没有返回值

  工厂模式实例化对象不需要new 直接调用 自定义的需要new 来调用

  工厂模式在函数内部new 之后的对象是当前对象

  自定义 函数内this是当前对象

构造函数和实例化对象之间的关系

面向对象的思想是： 抽象过程（分析的一些关系）构造函数 —》 实例化的过程

实例对象是通过构造函数来创建的

console.dir(Person) 可以将这个对象的结构打印出来

实例对象的 per.constructor == Person 这个为true 结论 这个对象的构造器指向的是构造函数

prototype里面有constructor

per._proto_constructor == Person
per._proto_constructor == Person.prototype.constructor 为true
这个是实例对象              这个是构造函数里面的
可以通过这些方式进行判断数据是否这种类型
或者  per.constructor == Person 进行判断

判断数据类型的方式有 两种方式

per.constructor == Person 进行判断  构造器 == 构造函数名字
dog instanceof Person
尽可能使用第二种  第一种不准确  原因 原型里有详解

原型的引入

每一个对象都指向自己的方法，浪费大量空间 解决这个问题 就是让着她指向同一个空间 但是两个函数 容易造成命名冲突

这是就要通过原型进行解决了

• 原型添加方法解决数据共享

  this.prototype.eat = function() {
              console.log("我吃了");
    }
  

  此时的实例化对象没有方法这个属性

  此时的方法在原型里面

  解释eat方法

  此时的方法在原型里面 可以进行共享

  体会面向过程和面向对象的编程思想

  面向对象思想 初级如下

  function ChangeStyle(btnId, dvId, color) {
          this.btnObj = document.getElementById(btnId);
          this.dvObj = document.getElementById(dvId);
          this.color = color;
      }
      //数据共享方式来改变背景颜色
      ChangeStyle.prototype.init = function() {
          //console.log(this) 此时的this指向实例对象  需要保存起来  下面使用
          var that = this;
          this.btnObj.onclick = function() {
              that.dvObj.style.backgroundColor = that.color;
          }
      }
  
      var cs = new ChangeStyle("btn", "dv", "yellow");
      cs.init();
  

  高级面向对象编程 以后调用只需要写需求 实例化对象 调用函数

function ChangeStyle(btnObj, dvObj, json) {
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
    }
    
 //通过原型添加方法
 ChangeStyle.prototype.init = function() {
        var that = this;
        this.btnObj.onclick = function() {
            for (var key in that.json) {
                that.dvObj.style[key] = that.json[key];
            }
        }
    }
  var json = {
        "width": "500px",
        "height": "800px",
        "backgroundColor": "blue",
        "opacity": "0.2"
    };
    //实例化对象
    var cs = new ChangeStyle(my$("btn"), my$("dv"), json);
    //调用方法
    cs.init();

对象当中的属性可以是字符串 可是是数字类型 布尔类型；

复习原型

 * 实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的
 * 构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用
 其中实例对象中的 _proto_是不标准的  因为在ie8不支持 undefiend
 在谷歌和火狐是支持的
 所以使用原型添加方法   使用prototype
 另外  这一段代码  相当于 模板
 function ChangeStyle(btnObj, dvObj, json) {
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
  } 传入一些数据的

原型就是

_proto_或者prototype 都是原型对象

原型对象 解决数据共享 节省内存空间

构造函数和实例对象和原型对象之间的关系

下载EcnaScript.js这个文件可以快速查找函数的变量

构造函数，实例对象，原型对象之间的关系

通过构造函数创建实例对象 关系

实例对象中的_ ptoto_指向的是原型对象 原型对象在指向构造函数

通过以上建立联系的

有一张图片可以看一下

本来可以这样调用的
per._proto_.eat()但是这个_proto_ 不是标准的方法  有的浏览器不支持
直接使用  per.eat();

总结三者之间的关系

构造函数可以实例化对象

构造函数中有一个属性叫prototype，是构造函数的原型对象

构造函数的原型对象prototype 中有一个构造器 constructor，这个构造器指向的就是自己所在的原型对象所在的构造函数

实例化对象的原型对象 _ proto_指向的是该构造函数的原型对象

构造函数中prototype是可以直接被实例化对象进行调用的

利用原型共享数据

属性需要共享 方法需要共享

不需要共享的数据写在构造函数中，需要共享的数据写在原型中

属性进行共享 方法进行共享

Student.prototype.height = "188";
 Student.prototype.weight = "55kg";

简单的原型语法

字面量的方式创建 原型
Student.prototype = function (){
    constructor: Student,
    height: "188",
    weight: "55kg",
    study: function(){
        console.log("122");
    }
}

//这种方式的写法 必须手动添加构造器 不会自动加上去

原型对象中添加方法

实例对象中的方法是可以相互调用的

原型中的方法，是可以相互访问的

在案例里面看的比较清楚

实例对象使用的属性和方法层层的搜索

原型中的属性和实例中的属性一样 比如 原型中是 女 实例对象是男 则输出的是男

首先从实例对象中查找

总结：

实例对象使用的方法或者属性 先在实例对象中查找，找到了则直接使用，找不到则去实例对象的_ proto_指向的原型对象prototype中查找，找到了则使用，找不到则报错； 原型对象是最后找的

方法 调用的时候 构造函数有直接使用构造函数的

不用共享的是写在构造函数中

为内置对象的原型对象中添加方法

比如Array

var arr=new Array(10,20,30,40,50);
arr.join("|");
console.dir(arr);

将数组变成字符串

 var arr=new Array(10,20,30,40,50);
    //    arr.join("|");
    //    console.dir(arr);
    //
    //
    //    var str=new String("哦,唛嘎的");
    //    str.indexOf("哦");
    //    console.dir(str);
    //
    //
    //    var dt=new Date();
    //    dt.getFullYear();
    //    console.dir(dt);
这些是内置的对象

为内置对象的原型添加方法 直接在原型中 添加想要方法就可以了

leg

String.prototype.myReverse = function() {
        for (var i = this.length - 1; i >= 0; i--) {
            console.log(this[i]);
        }
    }
    var str = "abcdefg";
    str.myReverse();

局部变量变成全局变量

函数的自调用

(function (){
        
  })()
一次性的函数
也就是自调用函数

把局部变量变成全局变量 传入window就可以了

leg

(function(win) {
        var num = 10;
        win.num = num;
    })(window)
   console.log(num);

产生随机数对象

Math的相关方法

1.min()和max()方法

Math.min()用于确定一组数值中的最小值。Math.max()用于确定一组数值中的最大值。

https://www.jb51.net/article/102845.htm

2.舍入方法

Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；

Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；

Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数；

例如：

?

3.random()方法

Math.random()方法返回介于0到1之间一个随机数，不包括0和1。如果想大于这个范围的话，可以套用一下公式：

值 = Math.floor(Math.random() * 总数 + 第一个值)

例如：

alert(Math.floor(Math.random() * 10 + 1)); //随机产生1-10之间的任意数

?

为了更加方便的传递想要范围，可以写成函数：

?

4.其它方法

如下表格：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

方 法	说 明
Math.abs(num)	返回num的绝对值
Math.exp(num)	返回Math.E的num次幂
Math.log(num)	返回num的自然对数
Math.pow(num,power)	返回num的power次幂
Math.sqrt(num)	返回num的平方根
Math.acos(x)	返回x的反余弦值
Math.asin(x)	返回x的反正弦值
Math.atan(x)	返回x的反正切值
Math.atan2(y,x)	返回y/x的反正切值
Math.cos(x)	返回x的余弦值
Math.sin(x)	返回x的正弦值
Math.tan(x)	返回x的正切值

Math.random()产生随机数

//产生小方块对象
  (function (window) {
    //console.log(Random.getRandom(0,5));
    //选择器的方式来获取元素对象
    var map=document.querySelector(".map");

    //食物的构造函数
    function Food(width,height,color) {
      this.width=width||20;//默认的小方块的宽
      this.height=height||20;//默认的小方块的高
      //横坐标,纵坐标
      this.x=0;//横坐标随机产生的
      this.y=0;//纵坐标随机产生的
      this.color=color;//小方块的背景颜色
      this.element=document.createElement("div");//小方块的元素
    }
    //初始化小方块的显示的效果及位置---显示地图上
    Food.prototype.init=function (map) {
      //设置小方块的样式
      var div=this.element;
      div.style.position="absolute";//脱离文档流
      div.style.width=this.width+"px";
      div.style.height=this.height+"px";
      div.style.backgroundColor=this.color;
      //把小方块加到map地图中
      map.appendChild(div);
      this.render(map);
    };
    //产生随机位置
    Food.prototype.render=function (map) {
      //随机产生横纵坐标
      var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
      var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
      this.x=x;
      this.y=y;
      var div=this.element;
      div.style.left=this.x+"px";
      div.style.top=this.y+"px";
    };

    //实例化对象
    var fd=new Food(20,20,"green");
    fd.init(map);
    console.log(fd.x+"===="+fd.y);

    
  })(window);

案例随机小方块