获取当前元素到body的距离与prototype

本文探讨了JavaScript中获取元素到body距离的方法,this的六种指向情况,this的真正含义,创建对象的不同方式,new操作符的工作原理,以及prototype与__proto__的关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.获取当前元素到body的距离

function getTL(obj){
		var oT=obj.offsetTop;  // 获取当前元素到定位父级的上侧距离
		var oL=obj.offsetLeft;// 获取当前元素到定位父级的左侧距离
		var p=obj.offsetParent; // 获取当前元素的定位父级
		while(p){ // 判断定位父级是否为空
			oT=oT+p.offsetTop+p.clientTop; 
			oL=oL+p.offsetLeft+p.clientLeft;
			p=p.offsetParent;
		};
		return {left:oL,top:oT};
	}

2.this 指向分为六种情况

	1) 全局函数中的this,在全局环境下调用的时候指向window
				  注意:如果全局函数内部是严格模式,则在全局环境下不指向window 指undefined
			2) 函数被赋值给某个事件时,指向绑定事件的对象
			3) this在对象的方法中使用时,指向的是 方法所属的对象
			4)在闭包中 this 指向window
			5) 在构造函数中以及构造函数的原型对象中的this,都指向构造函数的实例对象
				var  arr=new Array()  Array 是构造函数   arr 实例对象
			6)箭头函数中的this 指向 箭头函数被定义的执行环境

3.this 指向函数运行时所属的对象
this 不指函数本身,也不指函数所对的作用域,指向调用此函数的对象

4.创建对象的方式有几种

1.直接给对象绑定属性和方法
2.通过字面量创建对象
3.工厂模式
4.构造函数
5.原型对象
6.混合模式(构造函数+原型对象)

5. new 操作符 做了什么工作

	 1) 实例的时候会创建一个空的新对象
	2) 将 this指向为新建的空对象
	3) 将绑定到this上的属性和方法,指向空对象
	4) 最后将新建的对象返出

6.prototype和__proto关系

	原型对象 prototype:每一个函数都一个原型对象,绑定到原型对象上的属性和方法是公共的

每一个对象上都有一个__proto__对象,只有函数对象才有prototype

__proto__是一个指针,它指的是构造它的对象的prototype
(实例化对象的__proto__ 指向构造函数的原型对象)
### 如何在 UniApp 中获取手机浏览器底部(如导航栏)的高度 #### 使用 `uni.getSystemInfo` 方法 为了动态适应不同设备屏幕尺寸和状态栏高度,可以利用 `uni.getSystemInfo` 接口来获取系统的相关信息。此方法能够返回关于当前操作环境的各种参数,其中包括安全区域的信息。 ```javascript export default { onLaunch: function () { this.setAppInfo(); }, methods: { setAppInfo() { uni.getSystemInfo({ success(res) { const { safeAreaInsets } = res; Vue.prototype.safeBottomInset = safeAreaInsets.bottom || 0; // 底部内边距 } }); } } } ``` 上述代码片段展示了如何通过调用 `uni.getSystemInfo` 来取得包含底部内边距在内的系统信息[^2]。 #### CSS 自动适配方案 对于 H5 页面来说,还可以借助 CSS 变量配合媒体查询的方式处理页面布局中的固定定位元素被原生导航条遮盖的问题: ```css /* 定义全局变量 */ html, body { margin: 0; padding: 0; } .fixed-bottom-box { height: 140rpx; position: fixed; bottom: env(safe-area-inset-bottom); /* iOS 系统的安全区留白 */ left: 0; width: 100%; } ``` 这里使用了 `env()` 函数指定组件距离视窗底端的距离应等于操作系统提供的安全区内边距值,从而确保即使存在虚拟按键也不会影响到网页内容显示[^4]。 #### 结合 JavaScript 和 CSS 解决方案 如果希望更灵活地控制界面行为,则可以在初始化阶段先读取一次系统信息保存至 Vuex store 或者 global property 当中供后续逻辑判断;同时也可以考虑编写一个通用 mixin 组件用于监听窗口大小变化事件以便实时调整样式设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值