前端知识点汇总

栏目: 后端 · 发布时间: 4年前

内容简介:null,undefined, boolean, number, string, Symbol, 对象类型。 基本数据类型存储在栈中 复杂数据类型的值存储在堆中,地址存储在栈中伪类 :hover :active :first-child :visited伪元素

null,undefined, boolean, number, string, Symbol, 对象类型。 基本数据类型存储在栈中 复杂数据类型的值存储在堆中,地址存储在栈中

2. null和undefined的区别

  • null表示不存在的对象,转为数值时 Number(null) 是0
  • undefined表示缺少值,转为数值时 Number(undefined) 是NaN:
    1. 当变量声明后未赋值时,默认为undefined
    2. 调用函数时,应该提供的参数没有提供,该参数等于undefined
    3. 对象没有赋值的属性,该属性的值为undefined
    var a ={}; a.name; // undefined
    
    1. 函数没有返回值时,默认返回undefined
    var f = f(); f // undefined
    

3. 判断js数据类型的方式,各自优缺点

  1. typeof:可准确判断基本数据类型,但null除外,因为 typeof(null) 返回Object;无法准确判断复杂数据类型,亲测返回的都是object
  2. instanceof:可准确判断复杂数据类型,但无法准确判断基本数据类型,原理是通过原型链层层查找、判断
    var a = 'aaaa';
        typeof(a);  // string
        a instanceof String;  // false
    
        var b = new String();
        typeof(b); //Object
        b instanceof String; // true
    复制代码
  3. constructor: 通过prototype原型上的constructor属性判断 var f = function(){}; f.constructor // Function() 但这种方法不适用于null和undefined,以为他们是无效对象,不存在constructor 此外,函数的 constructor 是不稳定的,会被人为修改prototype,那么原有的 constructor 引用会丢失
  4. toString: 该方法是最通用,但是写法最繁琐的
    var a = {name:'a', age: 10}; Object.prototype.toString.call(a); //[object Object]
    var b = [1,2,3]; Object.prototype.toString.call(a);  //[object Array]
    复制代码

4. 设计模式

  1. 工厂模式:在函数内创建一个对象,给对象赋予属性和方法后再将对象返回
    function Parent(){
        var Child = new Object();
        Child.name = 'YY';
        Child.age = 24;
        Child.sex = function(){
            return '女';
        }
        return Child;
    }
    
    var x = Parent();
    console.log(x.name);  //YY
    console.log(x.sex()); //女
    复制代码
    1. 构造函数模式:无需再函数内部重新创建对象, 而使用this指代
    function Parent(){
        var Child = new Object();
        this.name = 'YY';
        this.age = 24;
        Child.sex = function(){
            return '女';
        }
        return Child;
    }
    
    var x = new Parent();
    console.log(x.name);  //YY
    console.log(x.sex()); //女
    复制代码
    1. 原型模式:函数中不对属性进行定义,利用prototype属性对属性进行定义,可以让所有对象实例共享它所包含的属性及方法。
    function Parent(){   
        Parent.prototype.name="YY";  
        Parent.prototype.age=24;  
        Parent.prototype.sex=function(){
            return '女';
        }
    }
    
    var x = new Parent();
    console.log(x.name);  //YY
    console.log(x.sex()); //女
    复制代码
    1. 混合模式:原型模式+构造函数模式。这种模式中,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。
    function Parent(){  
        this.name="ZXJ";  
        this.age=24;  
    };
    Parent.prototype.sayname=function(){  
        return this.name;  
    };
    
    var  x =new  Parent(); 
    alert(x.sayname());   //ZXJ
    复制代码
    1. 动态原型模式:将所有信息封装在了构造函数中,而通过构造函数中初始化原型,这个可以通过判断该方法是否有效而选择是否需要初始化原型
    function Parent(){  
        this.name="ZXJ";  
        this.age=24;  
        if(typeof Parent._sayname=="undefined"){     
            Parent.prototype.sayname=function(){  
            return this.name;  
        }  
        Parent._sayname=true;  
        }  
    }
    
    var  x =new  Parent();  
    alert(x.sayname()); 
    复制代码

5. new一个对象的详细过程: new Person();

1. var obj = {};  //创建一个空对象
2. obj.__proto__ = Person.prototype;  //设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象
3. Person.call(obj);  //使用新对象调用函数,函数中的this被指向新实例对象
4. 将初始化完毕的新对象地址,保存在等号左边的变量中
复制代码

6. css伪类用一个冒号表示,伪元素则用两个冒号表示

伪类 :hover :active :first-child :visited

伪元素

  • ::after
  • ::before
  • ::first-line //文本的首行添加特殊样式
  • ::first-letter //文本的首字母添加特殊样式

7. 垂直居中的几种方案

  1. 父容器设置
display: table-cell; 
vertical-align: middle;
复制代码
  1. flex布局 父容器设置
display: flex;
justify-content: center;
align-items: center;
复制代码
  1. 相对定位加transform 自身设置
position: relative;
top: 50%;
transform: translateY(-50%);
复制代码
  1. display box 父容器设置
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center;
复制代码

以上所述就是小编给大家介绍的《前端知识点汇总》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

启示录

启示录

[美] Marty Cagan / 七印部落 / 华中科技大学出版社 / 2011-5 / 36.00元

为什么市场上那么多软件产品无人问津,成功的产品凤毛麟角?怎样发掘有价值的产品?拿什么说服开发团队接受你的产品设计?如何将敏捷方法融入产品开发?过去二十多年,Marty Cagan作为高级产品经理人为多家一流企业工作过,包括惠普、网景、美国在线、eBay。他亲历了个人电脑 、互联网、 电子商务的起落沉浮。《启示录:打造用户喜爱的产品》从人员、流程、产品三个角度介绍了现代软件(互联网)产品管理的实践经......一起来看看 《启示录》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具