JavaScript复习1 -- 浏览器兼容性问题、作用域、数据类型、原型与原型链

最新推荐文章于 2021-05-10 00:20:45 发布

a老皮

最新推荐文章于 2021-05-10 00:20:45 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： html、css、js学习笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_37610995/article/details/87895952

html、css、js学习笔记专栏收录该内容

15 篇文章

订阅专栏

JavaScript伪URL：用来激活脚本（但存在安全问题，潜在问题）
<noscript>元素：用来在无法显示<script>中脚本时，显示<noscript>元素包围的内容

//使用<meta>标签做重定向
<noscript>
        <meta http-equiv="Refresh" content="0; URL=noscripterror.html"
</noscript>

常见的浏览器兼容性问题：

CSS上的不兼容：

（1）标签默认的margin和padding不同

解决：引入reset.css或者在CSS文件开头加入通配符*都设置为0；

（2）块级元素使用float后，又有横向margin，在IE6下的margin偏大，会使后面一块被顶到下一行

解决：在float中加入display:inline;转为行内元素；

（3）高度较小的元素，在IE6/7中高度不受控制，可能会超出所设

解决：使用overflow:hidden;或者设置line-height小于所设高度；

（4）行内元素设置display:block;后使用float布局，又有横向margin，一样会有bug

解决：display:block;后加display:inlilne;display:table;

（5）有些浏览器的 img 默认是有间距，加入到通配符中reset也无法解决

解决：使用float为img布局

（6）min-height不兼容

解决：如设置最小300px

{
    min-height: 300px;
    height: auto !important;   /*都兼容*/
    height: 300px;             /*兼容IE6*/
    overflow: visible;          /*超出部分撑开显示*/
}

（7）opacity | **border-radius ** | box-sizing 等不兼容

{
	-webkit-border-radius: 20%;      /*Safari| chrome */
       -moz-border-radius: 20%;      /*firefox浏览器*/
        -ms-border-radius: 20%;      /*微软IE浏览器*/
         -o-border-radius: 20%;      /*Opera浏览器*/
            border-radius: 20%;
}
{
	-webkit-opacity: 0.8;      
       -moz-opacity: 0.8;      
        -ms-opacity: 0.8;      
         -o-opacity: 0.8;      
            opacity: 0.8;
}
{
    -webkit-box-sizing: border-box;     
       -moz-box-sizing: border-box;     
        -ms-box-sizing: border-box;     
         -o-box-sizing: border-box;      
            box-sizing: border-box;
}

（8）注意优先级的问题

// 所有浏览器（通用放最后）
height: 100px; 

//IE6 专用 
_height: 100px; 

//IE6 专用 
*height: 100px; 

//IE7 专用 
*+height: 100px; 

//IE7、FF 共用 
height: 100px !important;

浮动引起的问题：

塌陷 ( 父元素高度auto、子元素div使用float、导致父元素高度为0 )；

兄弟元素不使用float，却没有在正常标准流的位置，而是出现了异位；

解决：清除浮动

.clearfix:after { 
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden; 
} 
.clearfix { 
	display:inline-block; 
}

浏览器的内核

Mozilla Firefox ( Gecko )

Internet Explorer ( Trident )

Opera ( Presto )

Safari ( WebKit )

Google Chrome ( WebKit )

腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。
搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。
解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8一读到这个标签,它就会自动启动IE7兼容模式

作用域规则

JavaScript的作用域只有全局作用域、函数作用域

在函数外部，不管有没有var，都是全局变量；
在函数内部，有var是局部变量，没有var是全局变量；
存在“变量提升”，即，var会将变量声明提升到作用域的最前 ( 之后赋值，输出undefined )

ES6中，引入块级作用域

在代码块中，用let声明变量
不存在变量提升，直接报错

为什么需要闭包

闭包其实是作用域的扩展 – 函数能访问创建时的作用域的变量

use strict严格模式

不允许为没有声明过的变量赋值
不允许删除(delete)不能删除的内容，否则报错(如不能删除var声明的变量)
eval不能重新赋值、重写、或用作变量与属性的名称，也不能向该作用域引入新的变量
不允许使用with

数据类型

5中基本类型：Number、String、Boolean、undefined、null
复合类型：Object、Array、Function (Array、Function是特殊的Object)
ES6中加入新的原始数据类型Symbol

类型运算符instanceof、in，typeof运算符

instanceof：第一个操作数是第二个操作数的实例，则返回true;

in：第一个操作数是第二个操作数的某个属性名称，则返回true;

typeof：返回一个指示其操作数的数据类型的字符串

面向对象

JavaScript是基于原型的面向对象语言，原型关系是递归的。

访问的属性如果在实例中没有找到，解释器会沿着指向原型的原型链进行查找，直到通用的Object，就结束，返回undefined或报错

this

构造函数可以使用this访问正在创建的对象，这个this保存指向该对象的引用

原型

只有函数具有prototype属性，并且当作为构造函数调用某个函数时，该函数使用该属性创建新对象

function People(){
    this.age = '15';
}
People.prototype.country = "China";
People.prototype.doAction = function(name){
    return 'i am '+ name;
}
var student = new People(); 
console.log(student.doAction('Jeck'));

原型链

构造函数具有一个prototype属性(实例对象的内部原型)
prototype属性又具有一个constructor属性，向后指向该构造函数
instanceof会递归检查整个内部原型链；而constructor只检查当前对象实例的属性
对象的_proto_属性用来访问内部原型，它是对象的内部指针，指向构造函数的原型对象；而对象的原始构造函数的prototype属性指向该共享对象

function Robot(){}
var robot = new Robot();
alert(robot.constructor.prototype == robot._proto_)； //true