day18-面向对象2

最新推荐文章于 2024-05-28 19:37:38 发布

土豆沙发

最新推荐文章于 2024-05-28 19:37:38 发布

阅读量62

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/kuangjianming/article/details/114988524

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

在这里插入图片描述

this指向的总结

普通函数
【1】如果函数用new关键字调用的时候，这个函数中的this指向构造函数的实例
【2】如果函数用事件驱动调用的时候，函数中的this指向绑定事件的元素
【3】如果函数用对象obj.fun( ) ，fun函数中的this指向obj对象
【4】如果没有以上三种情况，函数中this指向window

原型对象中两个关键字

            function Person() {}
            Person.prototype.init = function () {
                console.log("Person原型对象上的方法");
            };

            function Student() {}
            Student.prototype.fun = function () {
                console.log("我是Student原型对象上的方法");
            };

            let p = new Person();
            let s = new Student();

//原型对象.isPrototypeOf（实例对象）
//对象instanceof构造函数；判断这个对象是否是这个构造函数的实例
//如果是就返回true 否则返回false

重置原型对象

重置原型对象：给原型对象赋值一个新的对象
重置原型对象导致没有原型对象constructor属性，相当于没有构造器
当你重置原型对象的时候，一定要给原型对象添加构造器constructor

function Person(){}
// Person.prototype.init = function () {};
// Person.prototype.aa = function () {};
// Person.prototype.bb = function () {};
//默认的原型对象上的constructor属性是不可以遍历的，但是手动添加的是可以遍历的
Person.prototype={
  init:function(){},
  aa:function(){},
  bb:function(){},
};
  //设置constructor属性为不可以遍历
  Object.defineProperty(Person.prototype,"constructor",{
  //value 就是这个属性添加属性值
  value:Person,
  configurable:false,
  
  //设置 属性是否可修改 如果值为true 表示可以修改 如果为false 表示不可以修改
  writable:false;
  
  //设置 属性是否可遍历 如果为true 表示可以遍历 否则就是不可遍历
  enumerbale:false
  });
  Person.prototype.constructor="111";
  for(let key in Person.prototype){
     console.log(key)
  }
  let p=new Person();
  console.log(p)

弹窗案例

在这里插入图片描述

        <style>
            #box {
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                background: rgba(0, 0, 0, 0.315);
            }
            #box div {
                position: absolute;
                width: 500px;
                height: 300px;
                left: 50%;
                top: 50%;
                border: 1px solid red;
                background: #fff;
                transform: translate(-50%, -50%);
            }
            #box button {
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background: skyblue;
                border: 1px solid #000;
                color: #fff;
                outline: none;
                cursor: pointer;
            }
            #box .cancel {
                position: absolute;
                bottom: 20px;
                left: 100px;
            }
            #box .sure {
                position: absolute;
                bottom: 20px;
                right: 100px;
            }
        </style>
        </head>
        <body>
           <button id="btn">点击弹窗</button>
           <script>
            /* 
                创建对象  窗口
                描述对象 
                    静态属性：
                        id名
                        窗口显示的内容
                    动态方法：
                        init 初始化
            */
           function Popup(id,txt,callback){
               this.id=id;
               this.txt=txt;
               this.callback=callback;
               this.init();
               this.click();
           }
           //重置原型对象的方式 在原型对象中写方法
           Popup.prototype={
               init(){
                    //创建一个元素
                    this.div=document.creatElement("div");
                    this.div.id=this.id;
                    this.box=document.creatElement("div");
                    
                    //存放内容的元素
                    this.p = document.createElement("p");
                    this.p.innerHTML = this.txt;
                    this.box.appendChild(this.p);
                    
                    //确定 取消按钮
                    this.cancel=document.createElement("button");
                    this.cancel.classList.add("cancel");
                    this.cancel.innerHTML = "取消";
                    this.box.appendChild(this.cancel);
                    this.sure = document.createElement("button");
                    this.sure.classList.add("sure");
                    this.sure.innerHTML = "确定";
                    this.box.appendChild(this.sure);
                    
                    //把box加入到div
                    this.div.appendChild(this.box);
                    document.body.appendChild(this.div);     
               },
               click:function(){
                    //绑定点击事件，因为需要拿到点击事件的结果，需要把点击事件的代码单独进行封装
                    this.div.onclick=()=>{
                        let e=window.event;
                        if(e.target.className=="cancel"){
                            this.div.remove();
                            this.callback(false);
                        }else if(e.target.calssName=="sure"){
                            this.div.remove();
                            this.callback(true);
                        }
                    }
               }    
           }
           //给原型对象添加构造器
           Object.defineProperty(Popup.prototype,"constructor",{
               value:Popup,
               configurable:false,
               writable:false,
               enumerable:false,
           });
           let btn=document.querySelector("#btn");
           btn.onclick=function(){
              new Popup("box","自定义的弹窗",function(res){
                  if(res){
                      console.log("删除数据")
                  }
              })
           }

table切换（面向对象）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            list-style: none;
        }

        .tabItem ul {
            /* width: 400px; */
            height: 44px;
            line-height: 44px;
            padding: 0;
            margin: 0;
        }

        .tabItem ul li {
            user-select: none;
            width: 100px;
            height: 44px;
            border: 1px dashed #ccc;
            border-left: none;
            border-bottom: none;
            text-align: center;
            float: left;
        }

        .tabItem ul li:nth-child(1) {
            border-left: 1px dashed #ccc;
        }

        .active {
            background: #195;
            color: #fff;
        }

        .tab-content {
            border: 1px solid #ccc;
            width: 403px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            display: none;
        }

        .current {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tabItem" id="tab1">
        <ul>
            <li class="active">关注</li>
            <li>新闻</li>
            <li>本地</li>
            <li>体育</li>
        </ul>
        <div class="tab-content current">关注</div>
        <div class="tab-content">新闻</div>
        <div class="tab-content">本地</div>
        <div class="tab-content">体育</div>
    </div>
    
    <script>
        /*  
                【1】创建对象 Tab()
                【2】描述对象
                    元素的名字（id名，class名）
                    init()
                    change()
                【3】操作对象
            */  
       function(str){
           this.str=str;
           this.init();
       } 
       Tab.prototype={
           init(){
               this.tab=document.querySelector(this.str);
               this.btn=this.tab.querySelectorAll("li");
               this.content = this.tab.querySelectorAll(".tab-content");
               //给每个li绑定点击事件
               this.btn.forEach((item,index)=>{
                    item.onclick=()=>{
                         this.changge(item,index)
                    }
               })   
           },
           change(ele,idx){
               //派他思想把所有的li的active去掉，然后给当前的元素添加
               //去掉所有的content的current 给当前的点击元素对应的content添加current
               for(let i=0;i<this.btn.length;i++){
                   this.btn[i].classList.remove("active");
                   this.content[i].classList.removee('current');
               }
               ele.classList.add("active");
               this.content[idx].calssList.add("current")
           }
       };
       //给原型对象添加构造器 必不可少的
       Object.defineProperty(Tab.prototype, "constructor", {
            value: Tab,
            configurable: false,
            writable: false,
            enumerable: false,
        });
        //使用对象
        new Tab("#tab1");

土豆沙发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day18-面向对象2

this指向的总结普通函数【1】如果函数用new关键字调用的时候，这个函数中的this指向构造函数的实例【2】如果函数用事件驱动调用的时候，函数中的this指向绑定事件的元素【3】如果函数用对象obj.fun( ) ，fun函数中的this指向obj对象【4】如果没有以上三种情况，函数中this指向window原型对象中两个关键字 function Person() {} Person.prototype.init = function ()
复制链接

扫一扫

专栏目录