js学习笔记

js

数组

var 数组名=new Array(长度);
var 数组名=[];//空数组
// 默认undefined
var arr3=new Array(10,20,1000,40,50,60); // 长度是6的数组
var arr = []
arr[100] = 1
arr.length == 101

对象

1. var instance = new Object()
   

2. 工厂函数

   function createObject(name,age) {
         var obj = new Object();//创建对象
         //添加属性
         obj.name = name;
         obj.age = age;
         //添加方法
         obj.sayHi = function () {
           console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
         };
         return obj;
       }
       //创建人的对象
       var per1 = createObject("小芳",20);
       per1.sayHi();
       //创建一个人的对象
       var per2 = createObject("小红",30);
       per2.sayHi();
   

3. 自定义构造函数

   function Person(name,age) {
         this.name=name;
         this.age=age;
         this.sayHi=function () {
           console.log("我叫:"+this.name+",年龄是:"+this.age);
         };
       }
   
       //自定义构造函数创建对象:先自定义一个构造函数,创建对象
       var obj=new Person("小明",10);
       console.log(obj.name);
       console.log(obj.age);
       obj.sayHi();
   
       var obj2=new Person("小红",20);
       console.log(obj2.name);
       console.log(obj2.age);
       obj2.sayHi();
   

4. 字面量创建

       var obj2={
         name:"小明",
         age:20,
         sayHi:function () {
           console.log("我是:"+this.name);
         },
         eat:function () {
           console.log("吃了");
         }
       };
       obj2.sayHi();
       obj2.eat();
   

基本包装类型

本身是基本类型,但是在执行代码的过程中,如果这种类型的变量调用了属性或者是方法,那么这种类型就不再是基本类型了,而是基本包装类型,这个变量也不是普通的变量了,而是基本包装类型对象

    //如果是一个对象&&true,那么结果是true
    //如果是一个true&&对象,那么结果是对象


//    var flag=new Boolean(false);
//    var result=true&&flag;
//    console.log(result);

DOM

offsetleft

只读属性,针对style和行内标签都有效

1. 没有脱离文档流:

   父级元素margin+父级元素padding+父级元素的border+自己的margin

2. 脱离文档流

   主要是自己的left和自己的margin

面向对象

原型

• 实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性----->proto----->可以叫原型对象
• 构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性------>prototype—>可以叫原型对象
• 实例对象的__proto__和构造函数中的prototype相等—>true

function Person(name,age) {
      this.name=name;
      this.age=age;
    }
    //通过原型来添加方法,解决数据共享,节省内存空间
    Person.prototype.eat=function () {
      console.log("吃凉菜");
    };

随机产生小方块案例

<script>
  //产生随机数对象的
  (function (window) {
    function Random() {
    }
    Random.prototype.getRandom=function (min,max) {
      return Math.floor(Math.random()*(max-min)+min);
    };
    //把局部对象暴露给window顶级对象,就成了全局的对象
    window.Random=new Random();
  })(window);//自调用构造函数的方式,分号一定要加上


  //产生小方块对象
  (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);
</script>

继承

组合继承

    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi=function () {
      console.log("阿涅哈斯诶呦");
    };
    function Student(name,age,sex,score) {
      //借用构造函数:属性值重复的问题
      Person.call(this,name,age,sex);
      this.score=score;
    }
    //改变原型指向----继承
    Student.prototype=new Person();//不传值
    Student.prototype.eat=function () {
      console.log("吃东西");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    stu.eat();
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    stu2.sayHi();
    stu2.eat();

this

• 普通函数中的this是window

• 对象.方法中的this是当前的实例对象

• 定时器方法中的this是window

• 构造函数中的this是实例对象

• 原型对象方法中的this是实例对象

函数是对象

• 对象中有__proto__,函数中应该有prototype

• 如果一个东西里面有prototype，又有__proto__,说明是函数,也是对象

• 所有的函数实际上是一个叫Function构造函数创建出来的实例对象

  var f1=new Function("num1","num2","return num1+num2");
  console.log(f1(10,20));
  console.log(f1.__proto__==Function.prototype);
  

apply和call

作用:改变this指向

function f1(x,y) {
  console.log("结果是:"+(x+y)+this);
  return "10000";
}
f1(10,20);//函数的调用
var result1=f1.apply(null,[10,20]);
var result2=f1.call(null,10,20);
console.log(result1);
console.log(result2);

bind

作用:

1. 改变this指向
2. 复制不调用
3. 参数可以在复制的时候传进去,也可以在复制之后调用的时候传入进去

函数对象的几个成员

    //函数中有一个name属性----->函数的名字,name属性是只读的,不能修改
    //函数中有一个arguments属性--->实参的个数
    //函数中有一个length属性---->函数定义的时候形参的个数
    //函数中有一个caller属性---->调用(f1函数在f2函数中调用的,所以,此时调用者就是f2)
    function f1(x,y) {
      console.log(f1.name);
      console.log(f1.arguments.length);
      console.log(f1.length);
      console.log(f1.caller);//调用者
    }

作用域

js中没有块级作用域

python中也没有块级作用域

正则表达式

1. 对象创建

   //对象创建完毕---
   var reg=new RegExp(/\d{5}/);
   //调用方法验证字符串是否匹配
   var flag=reg.test("我的电话是10086");
   console.log(flag);
   

2. 字面量

   //字面量的方式创建正则表达式对象
   var reg=/\d{1,5}/;
   var flag=reg.test("小苏的幸运数字:888");
   console.log(flag);
   

正则表达式需要一篇单独的博客