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)

　　

　　

ES5 常用 语法（object Arrary 函数绑定this指向）的更多相关文章

  1. ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式

    函数写法区别 计算a, b两个数字之和,有返回值 es5 写法 function add(a, b) { return a + b; } es6 写法(箭头函数) let add = (a, b) = ...

  2. MySQL常用语法命令及函数

    #创建数据库# create database 数据库名; #查看数据库# show databases; #选择数据库# use 数据库名; #删除数据库# drop database 数据库名; ...

  3. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  4. js bind 绑定this指向

    1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  5. ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...

  6. sql数据库基础知识整理，常用函数及常用语法

    1常用数据库聚合函数max()min()sum()avg()count() 2字符串处理函数len() 与 datalength()  区别:len是返回字符长度  datalength是返回字节长度 ...

  7. ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串

    这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '

  8. ES6常用语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  9. es6的常用语法

    最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...

随机推荐

  1. linux服务器内存、根目录使用率、某进程的监控告警脚本

    脚本内容如下 #!/bin/bash #磁盘超过百分之80发送邮件告警 DISK_USED=`df -T |sed -n "2p" |awk '{print ($4/$3)*100 ...

  2. Tensorflow笔记一

    Tensorlfow中的计算是通过一个有向图directed graph或则计算图computation graph来实现的. 将每一个运算操作operation作为一个节点node,节点之间通过边e ...

  3. 初学python之路-day09

    今天的主要内容为内存管理. 1.引用计数:垃圾回收机制的依据 # 1.变量的值被引用,该值的引用计数 +1 # 2.变量的值被解绑,该值的引用计数 -1 # 3.引用计数为0时就会被垃圾回收机制回收 ...

  4. 【java】字节码操作技术

    asm.javassist.cglib. 1.asm 比较底层,使用的visitor设计模式. 官网:https://asm.ow2.io/ 2.javassist 官网:http://www.jav ...

  5. Django与Ajax

    一.Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  6. ELK搭建<二>：安装ES插件head

    1.去github下载head,针对ES版本不同,安装方式也不一样, =>在2.x以前版本可以通过插件安装 for Elasticsearch 2.x: sudo elasticsearch/b ...

  7. 编译Nginx

    需要在默认配置中加入auth模块(http_auth_request_module). 我的环境:Ubuntu Ubuntu 14.04.1 LTS,amd64bit 下载nginx的源代码,如:ng ...

  8. 金山WPS一面

    昨天下午在武汉面了一场服务端开发工程师吧,结果还未通知,是校招的, 大体上题目如下: 先自我介绍 然后是聊了一些笔试上的情况 问了spring的的作用以及优势 http的状态,三次握手四次挥手 gc的 ...

  9. requireJS简单应用

    项目结构目录: Html页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  10. .asmx支持post请求或者get请求调用(WebService "因 URL 意外地以 结束，请求格式无法识别" 的解决方法)

    使用Post调用以asmx形式提供的webservice时,在本机调试没有调用问题.一旦部署至服务器后会提示如下信息: <html> <head> <title>因 ...