写在前面

问：了解原型链，了解作用域，js执行顺序等等，其实在日常的开发中好像真的感觉不到，原型链，作用域，js执行顺序，包括今天写得数组扩展方法，在现在框架成熟的今天，vue，react ，js框架+element 或者antd等等，好像就用不到这些东西，是不是就不需要看这些东西了？
答：不是
其实是息息相关，因为底层是js，框架里有原型链，函数报错的时候，觉得莫名其妙，其实你可能不够熟悉js的作用域，js的执行顺序

1.关于原型链

是这样，我本来也没有给数组的原形扩展方法，故事的开始，是一个数组问题，一些装杯的小伙伴

1.1 故事的开始，手写index

小儿子说，我要手写一个数组查询某值得方法吗，其实就是indexOf么，
然后，我让大儿子写，我就是循环item==item
大儿子大概就写了这样一段

     /***params []nums*return bool || num    *///就是入参是一个数字，有值返回下标，没值返回-1，也不考虑性能//啥的function find (arr,num) {for (let a = 0; a < num.length; a++  ){if(arr[i] == num){return i}}return -1}

1.2 故事的矛盾点，数组方法直接给Array原形扩展方法

但是小儿子看了网上的说不一样，有原形链。现在回想一下确实追加也方便
然后我就开始写

     /***params []nums*return bool || num    *///我说这特么不是直接追加就完事了么 装什么杯 非得封装Array.prototype.myFind =     function find (arr,num) {for (let a = 0; a < num.length; a++  ){if(arr[i] == num){return i}}return -1}

1.3 又一次悟到了原形链

我说这特么不是直接追加就完事了么装什么杯非得封装到数组圆形上，但是我突然就发现了问题。数组之前用的方法都是直接 . 出来的

     //比如这样var arr = [1,2,3]arr.push(1)arr.pop(1)//很明显入参只有一个num  而我们封装的需要入参两个，就是a.myFind(a,num)//很拉胯 // 然后我突然意识到 在给数组原形封装的时候 我不知道使用的当前数组的原对象是什么

很明显入参只有一个num 而我们封装的需要入参两个，就是a.myFind(a,num)
很拉胯
然后我突然意识到在给数组原形封装的时候我不知道使用的当前数组的原对象是什么
然后我去查了下封装的方法里this 就代表的当前数组，（其实就是实例化对象）

     /***params []nums*return bool || num    *///我说这特么不是直接追加就完事了么 装什么杯 非得封装Array.prototype.myFind = function find (num) {for (let a = 0; a < num.length; a++  ){if(this[i] == num){return i}}return -1}

1.4 故事的高潮，发现问题，返现没动手写过数组追加方法的自己是猪

然后就才意识到之前特么写原型链的时候不是写过。构造函数的中的this，就是指的实例化对象。而写得任意的数组，其实就是构造函数数组的实力话对象，只不过直接用了 [] 这种隐式创建的声明方式，其实他就是new Array（）

//我们每次声明一个数组
let a = [1, 2, 3]
//其实就是等于下面这行代码
let a = new Array(1, 2 ,3)
// 也可以这样写
let a = new Array()
a[0] = 1
a[1] = 2
a[2] = 3
//甚至可以这样写
let a = new Array(3)
a[0] = 1
a[1] = 2
a[2] = 3其实，这里没声明一个数组，就是等于实例化，new了一个新的数组对象，而数组中this，指的就是每一个实例化对象

之前写的关于原型链的东西 – 原型链混乱笔记自己看版

小尾巴，之前写的js中的this到底指什么，居然阅读量很高，但是之前没写好，擦，完了记得重新一次哦，小王

扩展数组方法给数组原形链追加方法（原型链中的this）相关推荐

JavaScript中的经典题型（类数组、CSS Sprites、事件委托、经典去重、原型链、闭包、深浅克隆、附带思路流程和源码）
JavaScript中的经典题型一.JavaScript中的经典题型 1..如何判断一个数组和类数组? 首先要明白什么是类数组. 类数组:类数组是一个普通对象,他的原型是Object.而真实的数组是 ...
原生JS 对象包装类原形原型链
对象用已学的知识点,描述一下你心目中的对象 var mrDeng = { name : "mrDeng",age : 40,sex : "male",heal ...
JS中的prototype、__proto__与constructor，原型和原型链
理解原型的几个关键点: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外); 2.所有的引用类型(对象)都有一个'_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象 ...
你是否理解js的Object与Function与原型链
js中,Function的本质是什么? Object的本质又是什么? js中有几条原型链? javascript的语言基于原型链,而实际上js的有两条原型链.开发者主要用到的是图中的红色原型链,如给A ...
前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
JS进阶学习(作用域、函数进阶、解构赋值、原型链)
文章目录 1.面相对象编程介绍 2.ES6中的类和对象 3.类的继承 ES6中的类和对象三个注意点作用域局部作用域全局作用域作用域链 JS垃圾回收机制(GC) JS垃圾回收机制-算法说明闭 ...
详解JS原型链与继承
详解JS原型链与继承 JavaScript 目录摘自JavaScript高级程序设计: 概念确定原型和实例的关系原型链的问题借用构造函数组合继承原型继承寄生式继承寄生组合式继承 new ...
wsjls-zw：16、面向对象和原型及原型链
面向对象什么是面向对象编程? 面向对象是一种编程思想,经常被拿来和面向过程比较. 面向过程关注的重点是动词,是分析出解决问题需要的步骤,然后编写函数实现每个步骤,最后依次调用函数. 而面向对象关注的 ...
【一天时间|JavaScript基础】原型和原型链
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识.直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀 ...

扩展数组方法给数组原形链追加方法（原型链中的this）

扩展数组方法

写在前面

1.关于原型链

1.1 故事的开始，手写index

1.2 故事的矛盾点，数组方法直接给Array原形扩展方法

1.3 又一次悟到了原形链

1.4 故事的高潮，发现问题，返现没动手写过数组追加方法的自己是猪

扩展数组方法给数组原形链追加方法（原型链中的this）相关推荐

最新文章

热门文章

扩展数组方法 给数组原形链追加方法（原型链中的this）

扩展数组方法

写在前面

1.关于原型链

1.1 故事的开始，手写index

1.2 故事的矛盾点，数组方法直接给Array原形扩展方法

1.3 又一次悟到了原形链

1.4 故事的高潮，发现问题，返现没动手写过数组追加方法的自己是猪

扩展数组方法 给数组原形链追加方法（原型链中的this）相关推荐

最新文章

热门文章

扩展数组方法给数组原形链追加方法（原型链中的this）

扩展数组方法给数组原形链追加方法（原型链中的this）相关推荐