JS高级部分
云之前端
千行代码,Bug何处藏。
展开
-
彻底弄懂图片懒加载及底层实现原理
思路:给图片一个src属性存储一个加载动画的图片,data-src存储真实的图片,在图片每一进入可视区域的时候先加载加载动画的图片,等真正进入可视区域再加载真实图片。思路:只需要获取img元素相对于视口的顶点位置rectObject.top,只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域。说明图片已经在视野范围内了,可以加载图片,下面是具体的代码实现。当元素相对于文档顶部的高度原创 2023-01-31 15:59:36 · 391 阅读 · 0 评论 -
JS高级-简单易懂的原型与原型链之(_ _proto_ _与prototype关系)
在讲解之前先记住几个关键点: 1.所有的实例对象都有一个_ proto 属性(即隐式原型) 2.所有的构造函数都有一个prototype属性(即显示原型) 3.实例对象的 proto _属性指向它的构造函数的prototype属性 下面创建一个Fn构造函数: function Fn(){ this.method1 = function(){ console.log('method1') } } var fn = new Fn() 在这个例子中,fn是Fn的实例,因此fn._ proto _ ===原创 2021-02-22 17:08:30 · 141 阅读 · 0 评论 -
JS高级之prototype的使用
1.prototype的介绍 每个函数都有一个prototype属性,默认指向一个Object空对象(原型对象) 原型对象中有一个constructor,指向函数对象 下面是一个例子: function People(name,age){ this.name = name; this.age = age; } 如果要添加一个新的属性需要在构造函数里面添加,比如要添加一个sex属性 function People(name,age){ this.name = name;原创 2021-02-20 14:51:09 · 1564 阅读 · 0 评论