ES5 常用 语法(object Arrary 函数绑定this指向)

ES object 扩展

ES object 扩展1.

<!DOCTYPE html>
<html>

<head>
  <link rel="shortcut icon" href="./assets/favicon.ico" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <script type="text/javascript">
//   ******object 扩展************
//1. var obj={name:'kebo', sex:'男'} var obj1 =Object.create(obj,{ age:{ value:25, writable:true,//可被修改 configurable:true, //可被删除 enumerable:true } }) console.log("obj1-----",obj1) obj1='kebo' // 修改对象的属性 // console.log("obj1-----###",obj1) // delete obj1 // 删除对象 // console.log(obj1) for (var i in obj1){ console.log(i) }
</script> 
</body>
</html>

  ES object 扩展2.

<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="./assets/favicon.ico" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <script type="text/javascript">
//   ******object 扩展************

var obj2 ={fistName:'kebe',lastName:'bryant'};
Object.defineProperties(obj2,{
    fullName: {
        get: function(){ //   获取对应的值 惰性求值 被调用时才执行
            return this.fistName + ' ' + this.lastName;
        },
        set: function(data){ //   监听对象的属性 发送改变是调用 
            console.log("obj2-------------",data)
            var names=data.split(' ')
            this.fistName=names[0]
            this.lastName=names[1]
            return this.fistName + ' ' + this.lastName;
        }
    },
})
console.log(obj2)
console.log('before',obj2.fullName)
obj2.fullName='kebe kebe';
console.log('after',obj2.fullName)
</script>
</body>
</html>

  ES object 扩展3

<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="./assets/favicon.ico" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <script type="text/javascript">
//   ******object 扩展************
var obj3 ={
     fistName:'kebe',
     lastName:'bryant',
     get function(){ // 获取对应的值 惰性求值 被调用时才执行
         return this.fistName + ' ' + this.lastName;
      },
      set function(data){ // 监听对象的属性 发送改变是调用
          console.log("obj2-------------",data)
          var names=data.split(' ')
          this.fistName=names[0]
          this.lastName=names[1]
         return this.fistName + ' ' + this.lastName;
     }
}
console.log(obj2)
console.log('before',obj2.fullName)
obj2.fullName='kebe kebe';
console.log('after',obj2.fullName)

</script> 
</body> 
</html>

  ES Arrary map, forEach ,filter(返回条件为true 的值)

var arr=[1,5,9,4,465,485,56,25,4,48,54]
console.log('4的下标',arr.indexOf(4))
console.log('4的下标',arr.lastIndexOf(4))
arr.forEach(function(item,index){
    console.log("item--",item)
})

var arr1=arr.map((item,index)=>{
    return item+10;
})
console.log("arr1--",arr1)

var arr2=arr.filter((item,index)=>{
    return item >25;
})
console.log("arr2 大于25的数--",arr2)

  ES 函数语法 this指向绑定

var obj1={userName:'kobe'}
function foo1(data) {
    console.log(this,data) 
    
}

foo.call(obj1,33)  //直接从第二个数据开始穿入
foo.apply(obj1,[33,45]) //第二个参数必须是数组


var bar = foo.bind(obj) //绑定后没有以及执行 返回一个值
console.log('bar',bar)
bar()
console.log('2222222222')
foo.bind(obj)(33666) //加()调用函数  直接从第二个数据开始穿入

var obj1={userName:'kobe'}
setTimeout(function () {
    console.log("this---",this)
}.bind(obj1),1000)

  

  

原文地址:https://www.cnblogs.com/tsgxj/p/10476462.html