js中原型和原型链

客官°小女子只卖身不卖艺 2022-12-08 12:52 279阅读 0赞

### 1.创建一个没有原型的对象：  ###

<!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> 
        .error{
            border:1px solid red;
        }
        </style>
    </head>
    
    <body>
       
    </body>
    
    </html>
    <script>
      let newObj=Object.create(null,{
          name:{
              value:'阿旭'
          }
      })
      //null是新创建对象的原型对象。
      console.log(newObj);
      /* {name:'阿旭'} 没有原型属性和方法*/
    </script>

### 2.原型链 ###

### 3.dom中使用原型方法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button class="red">保存</button>
        <button>取消</button>
    </body>
    </html>
    <script>
    let dom=document.querySelectorAll('button');
    console.log(dom);//NodeList(2) [button.red, button]
    let arr=Array.prototype.filter.call(dom,(item)=>{
      return item.hasAttribute('class')
    });
    /*
        //等价于上面的
        let arr=[].filter.call(dom,(item)=>{
        return item.hasAttribute('class')
        }); 
    */
    console.log(arr);//[button.red]
    console.log(arr[0].innerHTML);//保存
    </script>

### 4.使用父类构造函数初始属性 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <button class="red">保存</button>
        <button>取消</button>
    </body>
    
    </html>
    <script>
        //使用父类构造函数初始属性
       function User(name,age){
           this.name=name;
           this.age=age;
       }
       User.prototype.show=function(){
           console.log(this.name,this.age);
       }
       function Admin(...arg){
               User.apply(this,arg); 
       }
       Admin.prototype=Object.create(User.prototype);
       let obj=new Admin('yang',12);
       obj.show();//yang 12
       function Member(...arg){
               User.apply(this,arg); 
       }
       Member.prototype=Object.create(User.prototype);
       let obj1=new Member('zhangsa',18);
       obj1.show();//zhangsan 18
    </script>