基础总结（一）

秒速五厘米 2021-11-23 15:50 357阅读 0赞

**1. JS取消默认事件和阻止事件冒泡**

=====================原生js====================
    1.阻止a标签的跳转和input的上传
    //阻止浏览器的默认行为 
    function stopDefault( e ) { 
        //阻止默认浏览器动作(W3C) 
        if ( e && e.preventDefault ) 
            e.preventDefault(); 
        //IE中阻止函数器默认动作的方式 
        else 
            window.event.returnValue = false; 
        return false; 
    }
    2.阻止事件冒泡
    function stopBubble(e) { 
    //如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
    else 
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
    }

=====================jQuery====================

3.如果使用jQuery，既可以阻止默认事件，也可以阻止冒泡

$('#linkA').on('click', function () {
        
        return false
    })

**2. 强制类型和隐式类型转换**

一、强制类型转换
    Number()
    parseInt()
    parseFloat()
    toString()
    String()
    Boolean()

注：
    1.Number()
    （1）如果是布尔值，true和false分别被转换为1和0 （2）如果是数字值，返回本身。 （3）如果是null，返回0. （4）如果是undefined，返回NaN。 （5）如果是字符串，遵循以下规则： 　　1、如果字符串中只包含数字，则将其转换为十进制（忽略前导0） 　　2、如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0） 　　3、如果是空字符串，将其转换为0 　　4、如果字符串中包含非以上格式，则将其转换为NaN （6）如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则转换返回的字符串值。

2.parseInt()
    （1）忽略字符串前面的空格，直至找到第一个非空字符 （2）如果第一个字符不是数字符号或者负号，返回NaN （3）如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止 （4）如果上步解析的结果以0开头，则将其当作八进制来解析；如果以0x开头，则将其当作十六进制来解析 （5）如果指定radix参数，则以radix为基数进行解析
    3.parseFloat() 与parseInt基本相同 除了小数点
    4.toString（）除了undefined和null都有toString的方法
    5.Boolean(mix)函数，将任何类型的值转换为布尔值。 　　以下值会被转换为false：false、”"、0、NaN、null、undefined，其余任何值都会被转换为true
    
    二、隐式类型转化
    1) 字符串连接符+，会把其它数据类型转化为String()，然后字符串拼接
    算数运算符+ 会把 数据类型转化为Number() 然后做+法运算
    1+"true" = String(1) + "true" = "1true"
    1+true = 1+Number(true) = 1+ 1 = 2
    1+undefined = 1+Number(undefined) = 1+NaN = NaN
    1+null = 1+Number(null) = 1+0 = 1
    []==![]  =>  []==false  =>  []==Number(false)  => [] == 0  => [].toString() => 0  =>  '' == 0  =>  Number('') == 0  =>  0 == 0 
    2）关系运算符两边如果有一边是字符串的话，会将其它数据类型转化为Number，进行比较
    "2">10  => false   //Number('2') > 10  => 2> 10 ==> false
    3)关系运算符如果两边都是字符串的时候，同时转化为Number比较，而是把对应的Unicode编码转化为数字
    "2" > "10" => true // 
    4) undefined == undefind => true
    null == null => true
    undefined == null => true
    5)NaN和任何数据比较都是NaN
    NaN == NaN  => false

**3. 创建对象的几种方式**

1.字面式创建对象
    //字面量创建对象，代码简单，缺点是会产生重复代码
    var person = {
        name: 'Anglue',
        age: 15,
        getName: function () {
            return this.name
        }
    }
    console.log(person.getName())
    2.工厂模式
    //工厂模式 instanceof 无法判断对象是谁的实例
    function Stu(name){
        let obj = new Object()
        obj.name = name
        return obj
    }
    
    let stu = new Stu('wahaha')
    console.log(stu.name) //'wahaha'
    console.log(stu instanceof Stu)  //false
    console.log(stu instanceof Object) //true
    
    3. 构造函数模式
    function Stu(name,age){
        this.name = name
        this.age = age
        this.getName = function () {
            return this.name
        }
    }
    var stu = new Stu('Xiaoming', 15)
    console.log(stu.getName())
    console.log(stu instanceof Stu) //true
    4.原型方法
    //原型方式创建：优点是所有的实例都可以共享它的方法和属性，实例也可以定义自己的属性和方法，可以覆盖原型对象上的方法和属性名
    function Stu(){
    
    }
    Stu.prototype.name = 'Helan'
    Stu.prototype.getName = function(){
        return this.name
    }
    
    var stu = new Stu()
    console.log(stu.getName()) //'Helan'
    var stu1 = new Stu()
    stu1.name = 'fuck'
    console.log(stu1.getName()) //'fuck'
    5.组合式（构造函数+原型方法）常用
    function Stu(name, age){
        this.name = name
        this.age = age
    }
    
    Stu.prototype.getName = function(){
        return this.name
    }
    Stu.prototype.getAge = function(){
        return this.age
    }
    
    var stu = new Stu('Hong',22)
    console.log(stu.getName()) //'Helan'
    console.log(stu.getAge()) // 22

** 4. js中关于函数名和变量名重名，预解析，作用域的问题**

1.js的预解析指的是变量的声明和函数的声明前置，函数的前置要比变量的声明前置提前， 举例：
    function a(){}
    var a = 1
    console.log(a)
    ----------------------------------------------
    var a = 1
    function a(){}
    console.log(a)

----------------------------------------------
    以上两种形式都可以解析为一下结果

** 5.使用var声明和不使用var声明的变量**

console.log(bin)
    var bin = 10
    //output: undefined
    
    ------------------------------------------------------
    
    console.log(bin)
    bin = 10
    //output: Error: bin is not defined
    
    ------------------------------------------------------
    function func(){
        var bin = 10
        console.log(bin)
    }
    func()   //  10
    console.log(bin)  // error bin is not defuned
    
    ------------------------------------------------------
    function func(){
        bin = 10
        console.log(bin)
    }
    func()   //  10
    console.log(bin)  // 10
    
    ------------------------------------------------------
    var bin1 = 100;
    bin2 = 200
    this.bin3 = 300
    console.log(bin1)  // 100
    console.log(bin2)  // 200
    console.log(bin3)  // 300
    console.log(this.bin3) // 300
    console.log(window.bin1) // 100
    console.log(window.bin2) // 200
    console.log(window.bin3) // 300
    总结：
    1.var声明的变量是在本作用域有效，不用var声明的变量属于全局window的一个属性；
    2.var定义的变量不能使用delete， 不适用var定义的变量可以使用delete删除
    3.var声明的变量会前置，属性不存在前置现象所以报错
    4.为什么使用var bin1声明的也可以用window的属性来访问，因为声明bin1的作用域刚好是全局作用域，所以恰好可以使用window的属性来访问

**6.JS原型和原型链**

1. javascript 中分为普通对象和函数对象
    凡是通过new Function 创建的对象都是函数对象,其余都是普通对象
    js内置的函数对象：Date,String,Number,Object,Function,Boolean,Math...
    
    function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.getName = function () {
            return this.name
        }
    }
    var person1 = new Person('hollen', 20, 'teacher')
    var person2 = new Person('wile', 23, 'doctor')
    //person1和person2都是Person的实例，两个实例的contructor指针都指向构造函数Person
    console.log(person1.constructor === Person) //true
    console.log(person2.constructor === Person) //true
    
    2.原型对象
    js中每个函数都有prototype属性，这个属性指向函数的原型对象
    【每个对象都有__proto__属性，但是只有函数有prototype属性】
    为什么Person.prototype有一个contructor属性，因为原型对象Person.prototype 是构造函数Person的一个实例
    在Person创建的时候，就创建了他的实例化对象并赋值给prototype
    
    所以console.log(Person.prototype.contrutor === Person)  //true
    function Person(){}
    Person.prototype.name = 'ZHENZHU'
    Person.prototype.age = 33
    Person.prototype.job = 'teacher'
    Person.prototype.getName = function () {
        return this.name
    }
    console.log(Person.prototype.constructor === Person) //true

转载于:https://www.cnblogs.com/mypsq/p/11138477.html