文章目录

js数组对象基本包装类型DOMoffsetleft 面向对象原型随机产生小方块案例继承组合继承 this函数是对象apply和callbind函数对象的几个成员作用域正则表达式

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

对象

var instance = new Object()

工厂函数

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();

自定义构造函数

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();

字面量创建

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和行内标签都有效

没有脱离文档流:

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

脱离文档流

主要是自己的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

作用:

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

函数对象的几个成员

//函数中有一个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中也没有块级作用域

正则表达式

对象创建

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

字面量

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

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