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

最新推荐文章于 2022-09-29 10:35:00 发布

Sophie_U

最新推荐文章于 2022-09-29 10:35:00 发布

阅读量408

点赞数

分类专栏：初级前端知识文章标签：面向对象继承

本文链接：https://blog.csdn.net/Sophie_U/article/details/52888410

版权

初级前端知识专栏收录该内容

36 篇文章 4 订阅

订阅专栏

知识点：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>

Sophie_U

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中的this关键字，面向对象编程

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

扫一扫