面向对象：是一种编程思想
对象:有属性(变量)和方法（函数）
面向对象的特点：
1、把功能写进函数
2、函数必须在对象身上调用：对象名.函数名（），
3、对象身上的功能可以继承
<script type="text/javascript">
var data=new Date();//对象
data.getDate();
data.setDate();
data.getFullYear();
var arr=[];
var arr1=new Array(2,3,4);
arr1.sort();
arr1.push();
arr.length
</script>对象的创建方式
1、字面量方式{}
2、new Object（）
<script type="text/javascript">
var arr=[1,23];
var obj={
name:'电脑',
say:function(){}
};
var obj1=new Object();
obj.height='50cm';
obj.width='100cm';
obj.action=function(){
1//放视频
2//写代码
3//浏览网页
4//设计
}
obj.sdf=function(){
//开机
//关机
}
obj1.age='18';
obj1.sport=function(){
console.log('打球')
}
console.log(obj1.sport())
</script>创建完的对象的特点
1、添加属性：可以添加描述对象的特征，属性值可以任意（非函数类型就可以）
2、添加方法：实现对象的一些功能，方法的值是函数
<script type="text/javascript">
var arr=[1,23];
var obj={
name:'电脑',
say:function(){}
};
var obj1=new Object();
obj.height='50cm';
obj.width='100cm';
obj.action=function(){
1//放视频
2//写代码
3//浏览网页
4//设计
}
obj.sdf=function(){
//开机
//关机
}
obj1.age='18';
obj1.sport=function(){
console.log('打球')
}
console.log(obj1.sport())
</script>new操作符
new：一元运算符，后面只能跟函数，用来调用函数。
调用方式
1、new 函数
2、new 函数（参数）
用new创建函数的执行过程
1、自动创建一个空对象
2、把函数中的this只想这个空对象
3、函数执行完成后自动返回创建的那个对象，即使函数中return
若函数里有return ：
1.return后面是一个对象那么就返回一个对象
2.如归后面是非对象，返回自动创建的那个对象。
结论：
1、用new调用的函数，得到的永远是对象，不管函数有没有返回值
2、使用new调用的函数，这个函数就是用来创建对象的，他叫构造函数。
构造函数：创建病初始化的函数，并需要new来调用。
实例：通过构造函数new出来的对象
实例化：创建对象的过程叫实例化
构造函数的问题：性能问题，会造成资源浪费。
prototype
prototype：函数身上的属性，每个函数身上都有这个属性，他的值是一个对象。
用途：他身上可以放属性和方法，乳沟和构造函数结合，通过构造函数创建对象就具有他身上的方法和属性。
原型上的属性和方法每个实例都会有。
若对象是通过构造函数创建的，那么prototype就是对象的原型对象，
建议吧公用的属性和方法都放在prototype上。
<head>
<meta charset="utf-8" />
<title>面向对象选项卡</title>
<style type="text/css">
p{display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
function Tab(obj){
console.log(this)
this.btns=obj.getElementsByTagName('input');
this.ps=obj.getElementsByTagName('p');
this.length=this.btns.length;
this.index=0;//n
var This=this;
for(var i=0;i<this.length;i++){
this.btns[i].index=i;
this.btns[i].onclick=function(){
This.index=this.index;
This.play();
This.timer&&This.stop();
}
}
}
Tab.prototype.play=function(){
for(i=0;i<this.length;i++){
this.btns[i].style.background='';
this.ps[i].style.display='none';
}
this.btns[this.index].style.background='red';
this.ps[this.index].style.display='block';
}
Tab.prototype.autoplay=function(){
var This=this;
this.timer=setInterval(function(){
This.index++;
if(This.index==This.length){
This.index=0
}proto
This.play();
},500)
}
Tab.prototype.stop=function(){
clearInterval(this.timer)
}
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');
var Tab1=new Tab(div1);
var Tab2=new Tab(div2);
Tab2.autoplay();
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="第一项" style="background: red;"/>
<input type="button" value="第二项"/>
<input type="button" value="第三项"/>
<p style="display: block;">1</p>
<p>2</p>
<p>3</p>
</div>
<div id="div2">
<input type="button" value="第一项" style="background: red;"/>
<input type="button" value="第二项"/>
<input type="button" value="第三项"/>
<p style="display: block;">1</p>
<p>2</p>
<p>3</p>
</div>
</body>_proto_
原型 原型链 继承
原型：保存所有子对象共有属性和方法的对象
所有函数都有prototype，指向自己的原型对象
所有对象都有proto，指向自己父级原型对象
（所有原型对象都有constructor，指向原型对应的构造函数）
prototype:函数的属性，可以把公有的属性和方法写在它身上。
_proto_：对象上的属性，每个对象上都会有这个属性，它的值就是对应构造函数的prototype值。
对象._proto_=构造函数.prototype
对象之所以能够继承原型身上的属性和方法，就是因为每个对象身上都有一个_proto_,_proto_的值就是指向了构造函数的prototype。
原型链
原型链：对象与原型之前的关系
原型链的查找规则
当我们调用一个对象身上的属性和方法是就有一个查找规则。
1、先在自己身上找，找到了就拿来用。
2、如果在自己身上没有找到，他就会在该对象的_proto_下查找，（因这个_proto_属性，指向的是他对应构造函数的prototype，在他身上找就是在狗仔函数的原型身上找）
3、如果原型上没有找到，那么会继续找到object身上的prototype，如果没找到返回undefined
<script type="text/javascript">
function person(name,age){
this.name=name;
this.age=age;
}
person.prototype={
job:'猿类',
say:function(){
console.log(this.name)
}
}
Object.prototype.age=22;
var p1=new person('小明',18);
console.log(p1);
console.log(p1.sex);//undefined
p1.say();//小明
Object.prototype.six='女';
var p2=new person('小丽',28) ;
console.log(p2);
console.log(p2.age);
console.log(p2.six);
console.log(p1.six);
</script>面向对象的写法
<script type="text/javascript">
function 构造函数的名字(){
this.属性=??;
}
构造函数.prototype.方法=function(){
}
用法:var 实例对象=new 构造函数()
实例对象.方法()
实例对象.属性
面向对象的写法:
1.所有的变量都做属性.(需要写在构造函数里)
2.所有函数都变成方法,添加构造函数的原型上.
3.this的指向,在事件和定时器里找不到真正的this,所以要
在外面存一下
</script>hasOwnProperty
hasOwnProperty：用来判断属性是不是自己身上的（判断是不是自己的）
语法：对象.hasOwnProperty（要检测的属性）；
**返回：**true false
注意：
1、这个方法是object上的方法，顶层对象。
2、他不会顺着原型链身上找，只找自身
constructor
constructor：每个对象都有这个属性，默认指向该对象对应的构造函数。这个属性不在对象的原型上。
作用：
1、查看对象的构造函数
2、判断类型
语法：对象.constructor
返回值：对象的构造函数
注意：这个属性可以被改掉（虽然没什么用）
call
作用：调用函数并改变this的指向
语法：函数.call（thisArg，arg1，arg2….）
参数第一个参数，函数中this的指向
第二个以及后面的参数，是函数的参数
注意：第一个参数如果是undefined货null，this指向window
<script type="text/javascript">
function fn(){
console.log(this);
}
fn();//window;
new fn();//{}
fn.call(1);
fn.call('lisa');
fn.call({});
fn.call([1,2,3,4]);
fn.call(/\d/g);
fn.call(undefined);
fn.call(null);
function fn1(name,age){
console.log(this,name,age)
}
fn1('lisa',18);//window,lisa,18
fn1.call('大海','水',18);
</script>apply
作用：调用并改变this的指向
语法：函数.call(thisArg,[arg1,arg2…])；
参数：
第一个参数函数中this的指向
第二个参数，是函数的参数。
注意：第一个参数如果是undefined或null，this指向window
<script type="text/javascript">
function fn1(name,age){
console.log(this,name,age)
}
fn1.apply('lantian',['小鸟',1])
fn1.apply('大地',['草'])
</script>toString
作用：1、把对象类型转换成字符串2、数据类型判断
系统自定义的对象，它的toString方法在他对应的原型对象上。
我们自己写的，toString方法在他最顶层object的型上
<script type="text/javascript">
var obj={name:'lisa'};
console.log(obj);
var arr=[1,2,3];
console.log(arr.toString());
console.log(obj.toString());//[object Object]没有意义
console.log(arr);
function person(name){
this.name=name;
}
person.prototype.age=18;
var p1=new person('lisa');
console.log(p1);
var num=0,
str='lisa',
b=true,
n=null,
u=undefined,
re=/\d/,arr=[1,34],obj={a:1}, d=new Date();
console.log(Object.prototype.toString.call(num));
console.log(Object.prototype.toString.call(str));
console.log(Object.prototype.toString.call(b));
console.log(Object.prototype.toString.call(n));
console.log(Object.prototype.toString.call(u));
console.log(Object.prototype.toString.call(re));
console.log(Object.prototype.toString.call(arr));
console.log(Object.prototype.toString.call(obj));
console.log(Object.prototype.toString.call(d));
</script>instanceof
作用：（二元运算符）1、用来查找对象与构造函数在原型链上有没有关系。2、用来检测数据类型
语法：对象.instanceof 构造函数
**返回：**true false
script type="text/javascript">
function Person(name){
this.name=name;
}
var p1=new Person('hell');
var p2={};
console.log(p1 instanceof Person);//true
console.log(p2 instanceof Person);//false
console.log(p1 instanceof Object);//true
var num=0,
str='lisa',
b=true,
n=null,
u=undefined,
re=/\d/,arr=[1,34],obj={a:1}, d=new Date();
console.log(13 instanceof Number);//false
console.log(arr instanceof Array);//true
console.log(re instanceof RegExp)//true
console.log(obj instanceof Object);//true
console.log(d instanceof Date);//true
// console.log(str instanceof String);//false
// console.log(b instanceof Boolean);//false
console.log(n instanceof Null);
//// console.log(u instanceof undefined);
</script>
3715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
