【JavaScript高级2】构造函数实例对象和原型对象的三角关系，以及查找机制不来了解一下？-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_78145364/article/details/138903959




`以上代码运行结果,设置constructor属性如图:`  

![在这里插入图片描述](https://img-blog.csdnimg.cn/895d2ca4679c4765820f6485ee9e542a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)  

`如果未设置constructor属性,如图:`  

![在这里插入图片描述](https://img-blog.csdnimg.cn/b9e57a8b9c0c43e2832e69ca9e0a803b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)



[]( )🥈1.7 原型链

------------------------------------------------------------------------



    每一个实例对象又有一个\_\_proto\_\_属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有\_\_proto\_\_属性，这样一层一层往上找就形成了原型链。  

![在这里插入图片描述](https://img-blog.csdnimg.cn/d2b148fa56ce46958e5fbf26e7bdd663.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)



[]( )🥈1.8 构造函数实例和原型对象三角关系

------------------------------------------------------------------------------------



1.构造函数的prototype属性指向了构造函数原型对象  

2.实例对象是由构造函数创建的,实例对象的\_\_proto\_\_属性指向了构造函数的原型对象  

3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数  

![在这里插入图片描述](https://img-blog.csdnimg.cn/d60e719e085e4c7583cdc6bbf4418e43.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)



[]( )🥈1.9 原型链和成员的查找机制

--------------------------------------------------------------------------------



    任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有\_\_proto\_\_属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;  

📣`注意：当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。如果还没有就查找原型对象的原型（Object的原型对象）。依此类推一直找到 Object 为止（null）。__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。`❗❗❗



[]( )🥈1.10 原型对象中this指向

---------------------------------------------------------------------------------



构造函数中的this和原型对象的this,都指向我们new出来的实例对象;

function Star(uname, age) {

this.uname = uname;

this.age = age;

}

var that;

Star.prototype.sing = function() {

console.log('我会唱歌');

that = this;

}

var ldh = new Star(‘刘德华’, 18);

// 1. 在构造函数中,里面this指向的是对象实例 ldh

console.log(that === ldh);//true

// 2.原型对象函数里面的this 指向的是实例对象 ldh




[]( )🥈1.11 通过原型为数组扩展内置方法

-----------------------------------------------------------------------------------

Array.prototype.sum = function() {

var sum = 0;

for (var i = 0; i < this.length; i++) {

sum += this[i];

}

return sum;

};

//此时数组对象中已经存在sum()方法了可以始终数组.sum()进行数据的求




[]( )🥇 二、继承

======================================================================



### []( )🏅 2.1 call()



*   call()可以调用函数

*   call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3…使用逗号隔开连接;

function fn(x, y) {

 console.log(this);

 console.log(x + y);

}

var o = {

name: 'andy'

};

fn.call(o, 1, 2);//调用了函数此时的this指向了对象o,




![在这里插入图片描述](https://img-blog.csdnimg.cn/c55706ff97f14b32bfaf355d8a2ae45d.png)



### []( )🏅 2.2 子构造函数继承父构造函数中的属性



1.  先定义一个父构造函数

2.  再定义一个子构造函数

3.  子构造函数继承父构造函数的属性(使用call方法)

// 1. 父构造函数

function Father(uname, age) {

// this 指向父构造函数的对象实例

this.uname = uname;

this.age = age;

}

// 2 .子构造函数

function Son(uname, age, score) {

// this 指向子构造函数的对象实例

3.使用call方式实现子继承父的属性

Father.call(this, uname, age);

this.score = score;

}

var son = new Son(‘刘德华’, 18, 100);

console.log(son);




![在这里插入图片描述](https://img-blog.csdnimg.cn/36db1a5b4e4e49b5950ddd70156ea66b.png)



### []( )🏅 2.3 借用原型对象继承方法



1.  先定义一个父构造函数

2.  再定义一个子构造函数

3.  子构造函数继承父构造函数的属性(使用call方法)

// 1. 父构造函数

function Father(uname, age) {

// this 指向父构造函数的对象实例

this.uname = uname;

this.age = age;

}

Father.prototype.money = function() {

console.log(100000);

};

// 2 .子构造函数

function Son(uname, age, score) {

  // this 指向子构造函数的对象实例

  Father.call(this, uname, age);

  this.score = score;

}

// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化

Son.prototype = new Father();

// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数

Son.prototype.constructor = Son;

// 这个是子构造函数专门的方法

Son.prototype.exam = function() {

console.log('孩子要考试');

}

var son = new Son(‘刘德华’, 18, 100);

console.log(son);




如上代码结果如图:  

![在这里插入图片描述](https://img-blog.csdnimg.cn/b1f6e561d86944d4b761bf8d32304df9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)



[]( )🥇 三、ES6 新增方法

============================================================================



### []( )🏅 3.1 数组方法forEach遍历数组

arr.forEach(function(value, index, array) {

   //参数一是:数组元素

   //参数二是:数组元素的索引

   //参数三是:当前的数组

})

//相当于数组遍历的 for循环没有返回值




### []( )🏅 3.2 数组方法filter过滤数组

var arr = [12, 66, 4, 88, 3, 7];

var newArr = arr.filter(function(value, index,array) {

 //参数一是:数组元素

 //参数二是:数组元素的索引

 //参数三是:当前的数组

 return value >= 20;

});

console.log(newArr);//[66,88] //返回值是一个新数组




### []( )🏅 3.3 数组方法some

some 查找数组中是否有满足条件的元素

var arr = [10, 30, 4];

var flag = arr.some(function(value,index,array) {

//参数一是:数组元素

 //参数二是:数组元素的索引

 //参数三是:当前的数组

 return value < 3;

});

console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环




### []( )🏅 3.4 筛选商品案例



1.  定义数组对象数据

    

    ```

    var data = [{

                id: 1,

                pname: '小米',

                price: 3999

            }, {

                id: 2,

                pname: 'oppo',

                price: 999

            }, {

                id: 3,

                pname: '荣耀',

                price: 1299

            }, {

                id: 4,

                pname: '华为',

                price: 1999

            }, ];

    

    ```

    

2.  使用forEach遍历数据并渲染到页面中

    

    ```

    data.forEach(function(value) {

      var tr = document.createElement('tr');

      tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + 	      	value.price + '</td>';

      tbody.appendChild(tr);

    });

    

    ```

    

3.  **根据价格筛选数据**

    

    1.  获取到搜索按钮并为其绑定点击事件

        

        ```

        search_price.addEventListener('click', function() {

        });

        

        ```

        

    2.  使用filter将用户输入的价格信息筛选出来

        

        ```

        search_price.addEventListener('click', function() {

              var newDate = data.filter(function(value) {

                //start.value是开始区间

                //end.value是结束的区间

              	return value.price >= start.value && value.price <= end.value;

              });

              console.log(newDate);

         });

        

        ```

        

    3.  将筛选出来的数据重新渲染到表格中

        

        1.  将渲染数据的逻辑封装到一个函数中

            

            ```

            function setDate(mydata) {

                  // 先清空原来tbody 里面的数据

              tbody.innerHTML = '';

              mydata.forEach(function(value) {

                var tr = document.createElement('tr');

                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';

                  tbody.appendChild(tr);

              });

             }

            

            ```

            

        2.  将筛选之后的数据重新渲染

            

            ```

             search_price.addEventListener('click', function() {

                 var newDate = data.filter(function(value) {

                 return value.price >= start.value && value.price <= end.value;

                 });

                 console.log(newDate);

                 // 把筛选完之后的对象渲染到页面中

                 setDate(newDate);

            });

            

            ```

            

    4.  根据商品名称筛选

        

        1.  获取用户输入的商品名称

            

        2.  为查询按钮绑定点击事件,将输入的商品名称与这个数据进行筛选

            

            ```

             search_pro.addEventListener('click', function() {

                 var arr = [];

                 data.some(function(value) {

                   if (value.pname === product.value) {

                     // console.log(value);

                     arr.push(value);

                     return true; // return 后面必须写true  

                   }

                 });

                 // 把拿到的数据渲染到页面中

                 setDate(arr);

            })

            

            ```

            



### []( )🏅 3.5 some和forEach区别



*   如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高；

*   在forEach 里面 return 不会终止迭代；



### []( )🏅 3.6 trim方法去除字符串两端的空格

var str = ’ hello ’

console.log(str.trim()） //hello 去除两端空格

var str1 = ’ he l l o ’

console.log(str.trim()） //he l l o 去除两端空格




### []( )🏅 3.7 获取对象的属性名



Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组；

var obj = {

 id: 1,

 pname: '小米',

 price: 1999,

 num: 2000

};

var result = Object.keys(obj)

console.log(result)//[id，pname,price,num]




### []( )🏅 3.8 Object.defineProperty



Object.defineProperty设置或修改对象中的属性：

Object.defineProperty(对象，修改或新增的属性名，{

	value:修改或新增的属性的值,

	writable:true/false,//如果值为false 不允许修改这个属性值

	enumerable: false,//enumerable 如果值为false 则不允许遍历

    configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性

})




[]( )🥇 知识の总结

=======================================================================



> 🥂(❁´◡\`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞



📣本章的重点内容是构造函数实例对象和原型对象的三角关系、new关键字的执行过程、Es6新增方法请小伙伴们牢记哦❗❗❗



[]( )🥇 推荐の内容

=======================================================================


#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/b64f7ed274b6cf2f3500b3b2b976f17b.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/754e375927df2ec9794c0f54a0ba12e2.png)

![](https://img-blog.csdnimg.cn/img_convert/36f02e9a37c1b4d60a7c2ab30b514f76.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
s6新增方法请小伙伴们牢记哦❗❗❗



[]( )🥇 推荐の内容

=======================================================================


#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中...(img-5uglrHLO-1715747749463)]

[外链图片转存中...(img-UZ00A8g7-1715747749464)]

[外链图片转存中...(img-3FYnJJdN-1715747749464)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.youkuaiyun.com/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**