创建对象 的三种方式：
//对象：特指的是某个事物，具有属性和方法（一组无序属性的集合）
//创建对象的 三种方法：
//1.字面量的方式
//2.调用系统的构造函数
//3.自定义构造函数方式
//实例对象
var per1={
name:"卡卡西",
age:20,
sex:"男",
eat:function(){
console.log('吃臭豆腐');
},
readBook:function(){
console.log('琴女热天天');
}
};
//调用系统的调用函数
var per2=new Object();
per2.name="大蛇丸";
per2.age=30;
per2.sex="男";
per2.eat=function(){
console.log('吃苹果');
};
per2.play=function(){
console.log('羽毛球');
};
console.log(per2 instanceof Object);//object类型
//自定义构造函数
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.play=function(){
console.log('羽毛球');
};
}
var per=new Person('楚天'，18,'男');
console.log(per instanceof Person);
</script>
工厂模式和自定义构造函数的区别：
<script>
//自定义构造函数
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.play=function(){
console.log('羽毛球');
};
}
var per=new Person('楚天'，18,'男');
console.log(per instanceof Person);
//工厂模式
function createObject(name,age){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayHi=function(){
console.log('你好');
};
return obj;
}
//区别：
/*共同点：都是函数，都可以创建对象，都可以传入参数
*
*工厂模式：
*函数名师小写
*有new
*有返回值
*new之后的对象是当前的 对象
*直接调用函数就可以创建对象
*
*自定义构造函数
*函数名是大写（首字母）
*没有new
*没有返回值
*this是当前的对象
*通过new的方式来创建对象
*
*
*
*
/
</script>
构造函数和实例对象之间的关系：
<script>
//面向对象的思想是----抽象的过程---》实例化的过程
//自定义构造函数---》实例化对象
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.eat=function(){
console.log('苹果');
};
}
//构造函数--》创建对象
var per=new Person("json",20,"boy");
per.eat();
//实例对象是通过构造函数来创建的
//实例对象会指向自己的构造函数
//把这个对象的结构显示出来
console.dir(per);
console.dir(Person);
//判断这个对象是不是这种数据类型
console.log(dog.constructor==Animal);
console.log(dog instanceof Person);
//总结
/*
*实例对象和构造函数之间 的关系：
*1.实例对象是通过构造函数来创建的---创建的过程叫实例化
*2.如何判断对象是不是这个数据类型
*1）通过构造器的方式 实例对象.构造器==构造函数名字
*2）对象 instanceof 构造函数名字
*尽可能的使用第二种方式来识别
*
*/
</script>
原型的引入
<script>
// function myEat(){
// console.log('吃苹果');
// }
// function Person(name,age,sex){
// this.name=name;
// this.age=age;
// this.sex=sex;
// this.eat=myEat;
// }
// var per1=new Person('小白',20);
// var per2=new Person('小黑',20);
// //测试
// console.dir(per1);
// console.dir(per2);
// console.log(per1.eat==per2.eat);//true
//-----------以上方法可能会出现命名冲突 的问题------------
//改进的方法：通过原型来解决----数据共享，节省内纯空间，作用之一
function Person(name,age){
this.name=name;
this.age=age;
}
//通过原型来添加方法
Person.prototype.eat=function(){
console.log('吃苹果');
};
var p1=new Person('小明'，20);
var p2=new Person('小红'，20);
console.log(p1.eat==p2.eat);//true
console.dir(p1);
</script>
图片发布于简书APP
构造函数和实例对象和原型对象三者之间的关系：
构造函数中有一个属性叫prototype，是构造函数的原型对象
构造函数的原型对象（prototype）中有一个construction构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象（proto）指向的是该改构造函数的原型对象
构造函数的原型对象（prototype）中的方法是可以被实例对象直接访问的
利用原型共享数据
属性需要共享，方法也需要共享
不需要共享的数据写在构造函数中，需要共享的数据写在原型中
<script>
//构造函数
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.eat=myEat;
}
Person.prototype.height="188";
Person.prototype.width="55";
Person.prototype.study=function(){
console.log('小菜一碟 ');
};
Person.prototype.eat=function(){
console.log('西瓜');
};
//实例化对象，并初始化
var per=new Person("jon",34,"girl");
console.dir(Person);
console.dir(per);
</script>
原型对象中添加方法
方法是可以相互调用的
<script>
//构造函数
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("小孩酥" ,20);
dog.eat();
</script>
实例对象使用的属性和方法层层搜索
图片发布于简书APP
实例对象使用的属性或者方法，先在实例中查找，找到了则直接使用，没找到，则去实例对象的proto指向的原型对象prototype找，找到则使用，没找到则报错。
图片发布于简书APP
为内置对象的原型对象中添加方法
我们能否为系统的队形的原型添加方法，如果可以相当于修改源码
我希望字符串中有一个倒序字符串的方法‘
<script>
//为String内置对象的原型对象中添加方法
String.prototype.myReverse=function(){
for (var i = this.length-1;i>=0; i--) {//数组倒序排列
console.log(this[i]);
}
};
var str="abfgerhn";
str.myReverse();
</script>
局部变量变全局变量
<script>
//函数的自调用---自调用函数
// (function(){
// console.log('hanshu');
// })();
//页面加载后，这个自调用函数的代码就执行完了
// (function(形参){
// var num=10;//局部变量
// })(实参);
// console.log(num);------undefined（报错）
(function(win){
var num=10;//局部变量
//js是一门动态类型的语言，对象没有属性，点了就有了
win.num=num;
})(window);
console.log(num);
</script>
案例：贪吃蛇随机小方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
.map{
width:800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
</body>
<script src="xiec.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(){
//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>
</html>
网友评论