web开发常见问题整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26941173/article/details/80892867

This指向问题
1. 在方法中谁调用this就指向谁
在对象方法中调用
这里写图片描述
事件绑定
这里写图片描述
事件监听
这里写图片描述
2. 在构造函数或者构造函数原型对象中this指向构造函数的实例
这里写图片描述
在项目中this指向问题的常见示例:
这里写图片描述
上面1:
因为在setInterval中要设置this.setState(),而此时的this已经指向window而不是class的this:
这里写图片描述
这里写图片描述

上面这种情况就是this指向出现问题的一种情况:
解决方法:1.先把this赋值给that,函数内部使用that
2.使用箭头函数
这里写图片描述
这里写图片描述
针对以上这种情况的解释:
也就是谁调用的函数,函数体中的this就指向谁。没有使用箭头函数时this出现在全局函数setInterval ()中的匿名函数里,并没有某个对象进行显示调用,所以this指向window对象。这时直接使用是指向了window,e而不是class类。
当使用箭头函数时this指向函数的宿主对象了。

但是有一种情况需要注意就是多层嵌套的箭头函数,原则就是:
1.箭头函数的this绑定看的是this所在的函数定义在哪个对象下,绑定到哪个对象则this就指向哪个对象。
2.如果有对象嵌套的情况,则this绑定到最近的一层对象上。
页面布局的问题
1. 假如说构造一种这样的布局:
这里写图片描述
这是可以使用calc()函数:
这里写图片描述

注意:calc()在css3中和less中的用法不太一样,在less中使用的方式是
width: calc(~”100%-20px”);
也可以使用弹性布局来实现:
这里写图片描述
2. 各种剧中效果的实现:
水平居中元素:
这里写图片描述
这里写图片描述
垂直居中元素

这里写图片描述
这里写图片描述
水平垂直居中元素
这里写图片描述
……详情参考https://blog.csdn.net/qq_26941173/article/details/80042271
同时flex布局参考
https://blog.csdn.net/qq_26941173/article/details/80379102

猜你喜欢

转载自blog.csdn.net/qq_26941173/article/details/80892867