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>