JavaScript中的this关键字，面向对象编程

知识点：this关键字，借来的this，面向对象的写法，面向对象的写法中的三大特性：封装、继承、多态
一、 this关键字
this的定义：即当前活动的对象，谁调用就指向谁
1、全局上的this
在全局环境中，this指的就是window；
1）、例：直接在全局中打印： console.log(this)； //window；
2、函数中的this
谁调用就指向谁；
1）、例：在全局中调用函数，直接fn()的写法，实际就是window在调用它

function fn(){
    console.log(this)
}
fn();   //window
3、构造函数中的this
function Parent(name,age){
this.name=name;
this.age=age;
}
var p1=new Parent("小明",19);

//通过new 构造函数的方式创建对象，在构造函数中，this指的就是创建的这个对象；此外，new还有一个作用是它会自动的返回新创建的对象；
4、对象上的this
对象上的this指的就是对象本身
例：

 var obj={
    name:"小花",
    age:18,
    showName:function(){
        console.log(this.name);  //指向的就是obj这个对象
    }
}
obj.showName();//小花

5、借来的this
1）、通过内置的call方法、apply方法将一个函数中的属性和方法应用到另一个函数上

//call,apply都可以改变this的指向
function Parent(name,age){
this.name=name;
this.age=age;
this.showName=function(){
        console.log(this.name);
    };
};
function Child(name,age){
    Parent.call(this,name,age);  //在这里将Parent的方法和属性加到Child上，当用new Child（）来创建一个对象时，它就具有了Parent上的方法和属性
}
var c1=new Child("小明",18);
c1.showName();//小明

2）、案例：将一个函数的参数反转；
//实现方法：通过向Array借reverse方法来将函数的参数对象arguments反转

arguments 是函数内自动创建的一个参数对象，用于存放函数的参数；

function foo(a,b,c,d){
    console.log(Array.prototype.reverse.call(arguments)); //用数组的方法强借给arguments这个参数对象，实现反转
}
foo(1,2,3,4) //4,3,2,1

3）、改进：上述案例中，要实现每次反转就得写多次；

function foo(a,b,c,d){
var arr=[].slice.call(arguments);  //将arguments转为数组，直接调用数组的方法
    console.log(arr.reverse());
}
foo(1,2,3,4)

4）、面向对象借this

function Parent(name,age){ //创建一个父类，并在父类上添加了一些属性和方法
this.name=name;
this.age=age;
this.showName=function(){
        console.log(this.name);
    }
this.goHome=function(p1,p2){
        console.log(this.name+"带"+p1+p2+"回家");
    }
}
function Children(name,age){  //创建一个子类
    Parent.call(this,name,age) //利用内置的call方法改变this的指向，使Parent中的this指向用new Children构造出的对象；
}
var c1=new Children("小花妹妹",5);
c1.showName();   //小花妹妹

上例中：通过call方法将Parent函数上的属性和方法绑定给children，使得用new Children的方法创建出的对象也具有了Parent上的属性和方法；并可以使用；
二、面向对象的写法
实例：写tab选项卡，
关键：创建一个tab构造函数获取到相应对象，通过在Tab函数的原型上添加公有方法，实现用new Tab创建的对象也能使用该方法；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:300px;margin: 0 auto;padding-bottom: 20px;}
#box div{width: 300px;height: 300px;border: solid 2px red;margin-top: 30px;display: none;}
#box div:nth-of-type(1){display: block;}
#box1 input:nth-of-type(1){background: #CCCCCC;}
#box1{width: 300px;margin: 0 auto;}
#box1 div{width: 300px;height: 300px;border: solid 2px red;margin-top: 30px;display: none;}
#box1 div:nth-of-type(1){display: block;}
#box1 input:nth-of-type(1){background: #CCCCCC;}
</style>
<script type="text/javascript">
 window.onload=function(){
var t1=new Tab('box');
 t1.init();
var t2=new newTab('box1');
 t2.init();
 t2.autoPlay();
 }
function Tab(id){
this.box=document.getElementById(id);
this.btn=this.box.querySelectorAll('input');
this.div=this.box.querySelectorAll('div');
 }
 Tab.prototype.init=function(){
var This=this;
for(var i=0;i<this.btn.length;i++){
this.btn[i].index=i;
this.btn[i].onclick=function(){
 This.showDiv(this.index);
 }
 }
 }
 Tab.prototype.showDiv=function(index){
for(var j=0;j<this.btn.length;j++){
this.btn[j].style.backgroundColor="white";
this.div[j].style.display='none';
 }
this.btn[index].style.backgroundColor="#ccc";
this.div[index].style.display="block";
 }
function newTab(id){
 Tab.call(this,id); //在父类上，Tab有传入参数id，所以这里也要注意传入参数
this.num=0;
 }
 extend(newTab.prototype,Tab.prototype); //newTab继承Tab的属性和方法，
function extend(obj1,obj2){
for(var attr in obj2){
 obj1[attr]=obj2[attr];
 }
 }
 newTab.prototype.autoPlay=function(){ //在newTab上扩展一个方法，但不会影响Tab；
var This=this;
 window.setInterval(function(){
if(This.num>=This.btn.length){
 This.num=0;
 }
 This.showDiv(This.num);
 This.num++;
 },1000)
 }
</script>
</head>
<body>
<div id="box"> 
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<div style="background-color: #ADFF2F;">11111</div>
<div style="background-color: #FFA500;">22222</div>
<div style="background-color: #CCCCCC;">33333</div>
</div>
<div id="box1">
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<div style="background-color: #ADFF2F;">11111</div>
<div style="background-color: #FFA500;">22222</div>
<div style="background-color: #CCCCCC;">33333</div>
</div>
</body>
</html>

秒客网

JavaScript中的this关键字，面向对象编程

相关文章