什么是面向对象
JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Function 是JS自带的函数对象。
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
var o3 = new f1();
var o1 = {};
var o2 =new Object();
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function
例如:
面向对象;就是按照JS 的思路去看到一个业务;把一个业务抽象成一个对象,兑现下有很多的属性,通过改变属性值得方式;来操作这个对象。从而完成这个逻辑
var obj1 = {
name: '小狗',
dec: '咬人',
}
console.log(obj1)
var obj = new Object();s
obj.name = '小狗'
obj['dec'] = '咬人'
obj.method1 = function(){
console.log('方法在对象中')
}
console.log(obj)
var animals = new Object()
animals.name = function (animalName){
return animalName;
}
animals.sex = function(sex){
return sex
}
animals.dec = function(dec){
return dec
}
console.log(animals.name('小猫'))
console.log(animals.sex('母的'))
console.log(animals.dec('真可爱'))
二。工厂函数
例如:
// 工厂函数作用;生产对象 (一大堆对象)
var animal = {
name:‘一个狗’,
color:‘black’,
kind:‘拉拉多’
}
// 工厂模式 function birenAnimal(name,color,kind){
return {
name:name,
color:color,
kind:kind,
} } console.log(birenAnimal(‘大狗’,‘白的’,‘藏獒’)) console.log(birenAnimal(‘luyang’,‘黄色’,‘中国人’))
console.log(birenAnimal(‘金胜涛’,‘黑色’,‘混血儿’))function productPeople(name,sex,food){
return {
name:name,
sex: sex,
food:food,
doing: function(){
if(this.name === ‘刘文彬’){
return this.name+‘吃’+this.food +‘我不打刘文彬,因为就是那个被打的豆豆’
}
return this.name+‘吃’+this.food + ‘打’+‘刘文彬(外号豆豆)’
// this.name+‘打’+‘刘文斌’
}
} }var res = productPeople(‘单苏荣’,‘女’,‘盒饭’) console.log(res)
console.log(res.doing()) console.log(productPeople(‘胡振华’,‘男’,‘黄焖鸡’))
console.log(productPeople(‘胡振华’,‘男’,‘黄焖鸡’).doing())
console.log(productPeople(‘刘文彬’,‘男’,‘石头’))
console.log(productPeople(‘刘文彬’,‘男’,‘石头’).doing())
练习一
面向对象之工厂函数实现工功能
<button>1.123</button>
<script src="./tools.js"></script>
<script>
var btn = document.getElementsByTagName('button')[0]
// 面向对象
/**
1:把整个功能抽象成一个对象
2:分析功能的面向过程,业务逻辑分几步
3:把每一个要实现的效果拆分为这个对象下的属性。(也可以才分为一个对象)
4:给每个属性进行赋值;
5:需要方法来实现的,属性的值为函数,注意 函数中this 指向;(谁调用指向谁)
我们目的是为了所有操作都通过我们的对象来完成,所以我们要让该函数中this
指向我们抽象的这个对象
6:如果有事件触发;注意事件在事件处理函数中,this 始终指向触发事件的对对象
7:封装回到初始化的方法;清空innerHTMl中的内容
*/
// addNum(btn)
// var x = 1;
// 面向过程
// btn.addEventListener('click',function(){
// x = parseInt(btn.innerHTML)
// btn.innerHTML = ++x
// })
// 面向对象之构造函数
// function addNum(el) {
// this.el = el;
// this.x = parseInt(el.innerHTML)
// this.chickHandle = chickHandle;
// this.removeHandle = removeHandle;
// }
// var add = new addNum(btn)
// function chickHandle() {
// var self = this
// self.el.onclick = function () {
// this.innerHTML = ++self.x
// }
// }
// function removeHandle() {
// this.el.innerHTML = null;
// }
// console.log(add)
// add.chickHandle()
</script>
js文件内容
var btn = document.getElementsByTagName('button')[0]
function addNum(el){
var o = {
el:el, // el 属性作用:保存元素对象
x: parseInt(el.innerHTML), // x 属性作用就是为了存放元素对象中的文本节点内容
ev: function(){ // ev 属性作用:为了帮元素对象绑定事件
// console.log(this) // this 谁调用函数;指向谁
// self 保存的是;谁调用指向谁。 o对象调用的
var self = this
self.el.onclick = function(){
console.log(this) // this 谁触发事件指向谁
this.innerHTML = self.x++;
}
},
removeEv: function(){ // removeEv 属性的作用;为了清空内容回到初始化
this.el.innerHTML = null;
},
}
o.ev();
return o;
}
练习二
面向对象轮播练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.banner div{
width: 500px;
height: 300px;
background: green;
color:white;
font-size:50px;
line-height: 300px;
text-align: center;
display: none
}
</style>
</head>
<body>
<div class="view">
<div class="banner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<button>上一张</button>
<button>下一张</button>
</div>
<h1 id="t1"><<</h1>
<h1 id="t2">>></h1>
</body>
<script>
var view=document.getElementsByClassName('view');
function Slider(view){
var banner=view.children[0];
var prev=view.children[1];
var next=view.children[2];
var y=0;
var x=0;
var timer;
var o={
nextPage:function(){
y=x;
x=x>banner.children.length-2?0:x+1;
o.show(x);
},
prevPage:function(){
y=x;
x=x<1?banner.children.length-1:x-1;
o.show(x);
},
show:function(b){
banner.children[y].style.display="none";
banner.children[b].style.display="block";
y=b;
x=b;
console.log("show",x,y);
},
loop:function(){
timer=setInterval(o.nextPage,3000);
},
stop:function(){
clearInterval(timer);
},
init:function(){
//初始状态
banner.children[x].style.display="block";
// 指向函数时候绑定事件
next.this.nextPage;
prev.this.prevPage;
this.loop();
}
}
o.init();
return o;
}
var obj=Slider(view[0]);
t1.obj.prevPage;
t2.obj.nextPage;
</script>
</html>
三。构造函数
构造函数;构造器;用来构造对象的
this 作用:指向构造出来的那个对象
this.对象属性 = 值;每个属性都有自己对象的作用,具体做什么由他们后面的值决定
例如:
function strucureObj(kind, name, color) {
this.kind = kind;
this.name = name;
this.colr = color;
this.doing = function () {
alert('胡振华go on')
console.log(this)
}
this.getEL = text;
}
var dog = new strucureObj('拉布拉多', '华振', '绿的')
dog.getEL()
// console.log(dog)
// dog.doing()
// var demo = dog.doing;
// demo()、
var cat = new strucureObj('狸花猫', '小明', '混合的')
// console.log(cat)
// console.log(this.color) // this
function text() {
console.log('我是text方法;我把这个方法放入到了构造器')
}
四。constructor属性
判断this指向谁的方式:
1:先判断this在哪里;
2:对应位置在那个对象
constructor 每个构造的对象;都有该属性;并且指向构造它们的构造函数,只读属性;不能操作
例如:
function Cat(name,color){
this.name = name;
this.color = color;
this.eat = function(){
alert(this.name+'要吃鱼')
}
this.dec = function(){
alert(this.name+'欺负二嘎子')
}
}
var smallCat = new Cat('二嘎的','蓝灰色')
console.log(smallCat)
smallCat.eat()
console.log(smallCat.constructor)
var tom = new Cat('大黑的','黑的')
console.log(tom.constructor,'大黑猫')
alert(smallCat.eat == tom.eat) // false 证明同样的方法;在堆中占了两个内存,所有给两个提供了连个指针
# 五。面向对象-Prototype模式
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。 这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
### 例如:
function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
isPrototypeOf()用来判断,某个proptotype对象和某个实例之间的关系
alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true
in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性
alert("name" in cat1); // true
alert("type" in cat1); // true