js中原型和原型链

最新推荐文章于 2024-02-01 08:00:00 发布

怒放的生命1991

最新推荐文章于 2024-02-01 08:00:00 发布

阅读量169

点赞数

分类专栏：知识随笔总结js object 文章标签： js object

本文链接：https://blog.csdn.net/qq_34507902/article/details/108677109

版权

知识随笔总结js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

object

1 篇文章 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.原型链

 let hd=new Object();
  Object.prototype.show=function(){
      console.log('jj')
  }
  function getName(){

  }
  console.dir(getName)
  console.log(getName.prototype.__proto__==getName.__proto__.__proto__)//true
  console.log(getName.prototype.__proto__==Object.prototype)//true
  let str={name:'str'};
  let a={name:'a'}
  console.log(str.__proto__==Object.prototype);//true
  console.log(Object.setPrototypeOf(str,a));//设置str原型为a
  console.log(Object.getPrototypeOf(str)==a);//true

function User(name){
    this.name=name
}
let j=new User('yang')
console.log(j.__proto__==User.prototype)//true
console.log(j)
//isPrototypeOf 判断原型
let aB={};
let b={};
Object.setPrototypeOf(aB,b);//设置aB的原型b
console.log(b.isPrototypeOf(aB));//true  判断b是不是aB的原型

//属性的检测
let a1={
    url:'baidu.com'
}
let b_name={
    name:'zhangsan'
}
Object.setPrototypeOf(a1,b_name);//
//检测name是不是a1的属性  返回布尔值
console.log('name' in a1)  //继承 true
for(let key in a1){
    //hasOwnPrototy只检测当前的对象中是否含有某个属性不会检测原型的上面
   if(a1.hasOwnProperty(key)){
     console.log(key);//
   }
}

//使用call/apply借用原型链 
//求最大值

let arr=[11,2,31,14,5,33,20,4,90];
let maxArr={
    data:[12,3,4,5]
}
Object.setPrototypeOf(arr,{
    max(data){
      return data.sort((a,b)=>b-a)[0]
    }
})
let newArr={
    lessons:{js:71,php:62,node:99,linux:88}
}
console.log(arr.max.call(null,Object.values(newArr.lessons)));//99

//优化之后的code
console.log(Math.max.call(null,...maxArr.data));//12
console.log(Math.max.apply(null,Object.values(newArr.lessons)));//99

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>

5.对象冒充和原型继承模式

  //es实现继承
function Person(name,age){
    this.name=name;
    this.age=age;
    this.run=function(){
        console.log(this.name+'在跑步','今年'+this.age+'了')
    }
}
Person.prototype.eat=function(){
    console.log(this.name,this.age);
}
function smallPerson(...arg){
    Person.call(this,...arg)//对象冒充  smallPerson已经继承了Person的构造函数的面的属性和方法 之后再对原型进行继承即可
}
smallPerson.prototype=Person.prototype;
let sP=new smallPerson('yangdongxu',30);
sP.run();
sP.eat();
console.log(sP);

怒放的生命1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中原型和原型链

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> .e.
复制链接

扫一扫

专栏目录