js高级 day1

1、工厂模式与自定义

工厂模式:函数是小写,有new,有返回值,new之后的对象是当前对象,直接调用函数就可以创建对象

function creatObject(name,age){

var obj=new Object();

obj.age=age;

obj.name=name;

obj.sayHi=function(){

console.log("您好");

};

return obj;

}

自定义:函数名首字母大写,没有new,没有返回值,this是当前对象,通过new方式来创建对象

function Person(name,age){

this.name=name;

this.age=age;

this.asayHi=function(){

console.log("您好");

};

}

2、实力函数和构造函数关系

(1)实例对象通过构造函数来创建

(2)判断对象是不是这个数据类型,尽量使用第二种:

<1>实例对象.构造器==构造函数名字

<2>对象 instanceof 构造函数名字

3、原型

通过原型来添加方法,解决数据共享,节省内存空间

function Person(name,age){

this.name=name;

this.age=age;

}

Person.prototype.eat=function(){

console.log("吃");

};

var per=new Person("小明",30);

console.log(p1.eat==p2.eat);

4、构造函数 实例对象 原型对象

构造函数可以实例化对象

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

构造函数的原型(prototype)中有constructor构造器,这个构造器指向自己所造的原型对象所在构造函数

实例对象原型(__proto__)指向该构造函数原型对象

构造函数原型对象中方法可以被实例对象直接访问

5、原型语法

function Stedent(name,age){

this.name=name;

this.age=age;

}

Student.prototype={

constructor:Student,   //手动修改构造器

height:"188",

weight:"55kg",

study:function(){

console.log("哈哈");

}

};

var stu=new Student("lily",20);

6、原型对象中方法,可以相互调用

function Animal(name,age){

this.name=name;

this.age=age;

}

Animal.prototype.eat=function(){

console.log("吃");

this.play();

};

Animal.prototype.play=function(){

console.log("玩");

this.sleep();

};

Animal.prototype.sleep=function(){

console.log("谁");

};

var dog=new Animal("大黄",5);

dog.eat();

7、实例对象的属性或者方法,先在实例中查找,找到则直接使用,找不到则到实例对象__proto__指向的原型对象prototype中找,找到则使用,找不到则报错

8、为内置对象添加原型方法

String.prototype.sayHi=function(){

console.log(this(谁调用谁是)+"haha");

};

var str="小杨";

str.sayHi();

9、局部变量变全局变量

(function(win //形参){

var num=10; //局部变量

win.num=num;

})(window //实参);

console.log(num);

10、产生随机数对象

(function(window){

function Random(){  //产生随机构造函数

}

Random.protorype.getRandom=functiom(){ //在原型对象中添加方法

return Math.floor(Math.random()*5);

};

window.Random=Random;

})(window);

var rm=new Random();

console.log(rm.getRandom());

11、随机小方块

<div class="map"></div>

<script src="common.js"></script>

<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(Randow。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.creatElement("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.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);

})(window);

</script>

猜你喜欢

转载自blog.csdn.net/LBunny_/article/details/82495705
今日推荐