js第三天学习整理(es5篇)

严格模式:

    1、正常运行模式,ES5为了规范js的规范书写就引出了严格模式' use strict',
    后面出现let/const这个语法渐渐淡出视野了。
    2、在js代码=>全局函数第一条语句定义为'use strict' =>类似html5的第一句声明
    3、语法:
            (1)定义变量必须使用 var
            (2)禁止自定义的函数this指向window
            (3)创建eval作用域
            (4)不能重命名     
            (5)为新语法做铺垫es6
            
            
复制代码

(2)禁止自定义的函数this指向window

'use strict'

Person(name,age){
    this.name = name
    this.age = age
}
//本意是构造函数调用,也可以当作函数调用
Person('tianze',18)   //就会出现报错,因为函数直接调用默认指向window=>(2)
//作为提醒
new Person('tianze',18) //ok
复制代码

(3)创建eval作用域 (我估计听过这个的基本都是大前端)

'use strict'
var str = 'tianze'
eval('console.log(str)')//tianze  eval是一个函数,可以区访问外部的变量,解析js字符串代码
eval('var str ="tianze";console.log(str)')   
// shuaige  eval()也有自己的作用域,就是块级作用域
console.log(str)   //tianze
复制代码

JSON对象

    JSON.stringify(obj/arr)
    //js对象(数组)转换为json对象(数组),说白了就是将js对象(数组)转为json的格式
    JSON.parse(json)
    json对象(数组/对象)转化为js对象(数组)
复制代码

    var Students = {
        name : 'tianze'
    }
    Students = JSON.stringify(Students)
    conlose.log( typeof Students) //'string' =>  'key':'value'  JSON为string类型
    
    Students = JSON.parse(Students) 
    console.log( typeof Students)  //'object'
复制代码

Object扩展

1、Object.create(prototype,[descriptors])
    作用:以指定对象为原型创建新的对象
    为新的对象指定新的属性,并对属性进行描述
    -value :指定值
    -writable : 标识当前的属性可否修改  默认:false
    -configurable :标识当前属性是否可以被删除 默认:false
    -enumerable 标识当前属性是否用for in 枚举 默认false
 2、Object.defineProperties(object,descriptors)
     作用:为指定对象扩展多个属性
     get:用来获取当前属性值的回调函数
     set:修改当前属性值触发的回调函数,并且实参即为修改后的结果
     存取器属性:setter,getter 一个监听(获取==>有位老师说是监听很有道理点赞)get获取
 
 
复制代码

1、Object.create(prototype,[descriptors]) 
//参数1、 就是参考对象(function的 原型属性{}空的object) 
//参数2、配置对象[]=>可选参数,为新的对象添加新的属性方法
//Object 是对象上一层的构造函数  原型链最终指向null那哥们
        var students = {name:'tianze',age:18}
        var student = {}
        student = Object.create(student,{
            sex:{
                value:'男',
                writable:true,  //赋值操作
                enumerable:true,  //删除
                configurable:true, //for in默认只遍历原型的属性
            }
        });
        console.log(student.sex)//男
        console.log(student.sex = '女') //女
        //delete student.sex; 删除属性
        for(var i in student){
            console.log(i) 
        }
        
复制代码

2、Object.defineProperties(object,descriptors)

var studentNanme  = { firstName:'tian',lastNmae:'ze'}

Object.defineProperties(studentName,{
    fullName:{              //扩展属性 =>属性值是一个对象
            get:function(){             //默认方法 (有点像抽象方法=>只给声明没有实现)
                this.firstName+' '+this.lastNmae
            }
            set:function(data){  
            //监听扩展属性，当扩展属性接收到传入的数据时，自动调用，将传入的值设置为实参注入到set函数
                var names = data.split(' ')
                this.firstName = names[0]
                 this.lastName= name[1]
            }
    }
})
console.log(studentName.fullName) 
//tian ze  获取扩展属性的值是就会执行get方法,每个扩展属性都有自己的get，set方法可以获取和监听扩展属性真香
get=>惰性求值(这个东西..就是你什么时候要我什么时候给你)你给键盘你来打字
哈哈哈哈都10点半了呜呜呜我想睡觉
==>(和java 和 js可能真的不再是雷峰塔和雷锋的关系了)
console.log(studentName.fullName('shuai ge')) 
studentName.fullName = 'shuai ge' //是无法设置 funname属性的
console.log(studentName.fullName) //shuai ge   

复制代码

对象本身的俩个方法

    get propertyName(){}  //用来得到当前属性的回调函数
    set propertyName(){}  //用来监听当前属性变化的回调函数
    
复制代码

var  obj = {
    firstName:'tian',
    lastNmae:'ze'
    
    get fullName(){          
    //换汤不换药,其实添加的属性还是fullName 这是书写方式改变了，炸看我丢函数,哦有返回值 get啊哈哈哈哈哈哈
        return this.firstname+' 'this.lastName
    },
    set funllName(data){
        var names = data.split(' ')
        this.firstName = names[0]
        this.lastName= name[1]
    }
}
console.log(obj.fullName)//tian ze
obj.fullName = 'shui ge' //是没有权限的
//这里对this还是有些不解,对象(函数)调用这个属性this就是这个对象(函数)有时看代码有点不知所措的感觉
复制代码

数组的扩展

    Array,prototype.indexOf(value) //得到值在数组中第一个元素
    Array,prototype.lastIndexOf(value) //得到值在数组中最后一个元素
    Array,prototype.forEach(function(item,index){}) //遍历数组  // 值   下标
    Array,prototype.map(function(item,index){}) //遍历数组返回一个新的数组
    Array,prototype.filter(function(item,index){}) //遍历过滤出一个新的子数组,返回条件为true
   
复制代码

 var arr[2,4,56,75,13,54,23,6,4]
 
var newarr =  arr.map(function(item,index){
        return item+10
 })
 console.log(newarr)
 
 var newArr = arr.filter(function(item,index){
     return item>20    //返回数值大于20的值并创建一个新的数组
 })
 console.log(newArr)
复制代码

Function的扩展

    1、Function.prototype.bind(obj)
    将函数内的this绑定为obj,并将函数返回
    2、区别bind()、与call()、apply()
       (1)都能指定函数中的this
       (2)call()和apply()都是立即指向函数
       (3)bind()是将函数返回
           
           
复制代码

var obj  = {userName:'tianze'}
function foo(data){
    console.log(this,data)
}
//传参的形式
foo.call(obj,33)  //直接从第二和个参数开始以此传入(绑定this并执行函数)
foo.applay(obj,[33]) //第二个参数必须是数组,传入放在数组里(绑定this并执行函数)
//bind的特点:绑定完this不会立即调用当前函数,而是将函数返回
//传参的方式和call一样,指定回调函数  =>函数定义了但是没有执行
 foo.bind(obj)();
下面的代码已经傻了

setTimeout(function(){
    console.log(this)
}.bind(obj),1000)   //将定时器的this=>obj
复制代码