js面向对象

1:es6中没有变量提升,所以必须先定义类,才能通过类实例化对象

2:类里面的共有属性和方法一定要加this使用

3:constructor里面的thi指向this实例对象,方法里面的this指向方法的调用者

4:静态成员和实例成员

  1:实例成员就是构造函数中内部通过this添加的成员 uname,age,sing就是实例成员

  2:实例成员只能通过实例化对象来访问

  3:静态成员 在构造函数本身上添加的成员

  4:静态成员只能通过构造函数来访问

5:构造函数和原型

  1:原来我们的面向对象是通过构造函数来创建的

    但是构造函数方法虽然好用,但是存在浪费内存的问题

  2:构造函数的原型对象 prototype

    构造函数通过原型分配的函数是所有对象所共享的

    javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象所有的对象和方法都会被构造函数所拥有

    我们可以把一些不变的方法,直接定义在prototype对象上,这样所有的对象实例就可以共享这这方法,不需要再开辟内存空间了

    重要

    1:原型是什么

      一个对象,我们也成为prototype为原型对象

    2:原型主要作用

        共享方法

    3:一般情况下,我们的公共属性定义到构造函数里面,公共的方法放到原型对象上

  3:对象原型__proto__


    对象都有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在

    方法的查找规则:首先先看ldh对象身上是否有sing方法,如果有就执行对象身上的sing,如果没有sing这个方法,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找sing这个方法

    __proto__对象原型和原型对象prototype是等价的

    __proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说是一条路线,但是他是一个非标准属性,因此实际开发中,不可以使用这个属性,他只是内部指向原型对象prototype

4:constructor  构造函数

  对象原型(__proto__)和构造函数(prototype)原型对象 里面都有一个属性constructcor属性,constructor我们成为构造函数,因为他指回构造函数本身

  constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数


  如果我们修改了原来的原型对象,给原型对象赋值的是一个新的对象,则必须手动的利用constructor指回原来的构造函数

5:javascript的成员查找机制

    1:当访问一个对象的属性(包括方法时),首先查找这个对象自身有没有该属性

    2:如果没有就查找他的原型(也就是__proto__指向的prototype原型对现象)

    3:如果还没有就查找原型对象的原型(Object的原型对象)

    4:以此类推一直找到Object为止(null)

    5:__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线

6:原型对象中的this 指向问题

    原型对象函数里面的this指向的是对象实例

7:扩展内置对象


    可以通过原型对象,对原来的原型对象进行扩展自定义的方法,比如给数组自定义增加求偶数的和的功能

    注意:数组和字符串内置对象不能给原型对象做覆盖操作Array.rototype = {},只能是Array.prototype.xx = function(){}的方式

8:继承

  1:call()

    可以调用这个函数    并且能够修改函数运行时的this指向

    语法

    fun.call(thisArg,arg1,arg2,....)

    1:thisArg:当前调用函数this的指向

    2:arg1,arg2  普通参数

9:es5新增方法

  1:数组

    1:forEach()

      arr.forEach(function(currentValue,index,arr))

      currentValue : 数组当前项的值

      index:数组当前项的索引

      arr:数组对象本身

  2:filter()


      arr.filter(function(currentValue,index,arr)) 


      filter()方法返回的的是一个新数组,新数组元素是通过检查指定数组中符合条件的所有元素,主要英语筛选数组

      currentValue : 数组当前项的值

      index:数组当前项的索引

      arr:数组对象本身

  3:some()

      arr.some(function(currentValue,index,arr)) 


      some()方法用于检测数组元素中是否满足指定条件,通俗点,查找数组中是否有满足指定条件的元素

      返回值为布尔值,有返回true,没有返回false

      如果找到第一个满足条件的元素,则终止循环,不在继续查找

      currentValue : 数组当前项的值

      index:数组当前项的索引

      arr:数组对象本身

      4:trim()


      trim()方法会从一个字符串的两端删除空白字符

      语法

      str.trim()

      trim()方法并不会影响原先字符串,它返回的是一个新的字符串

10:对象方法


    1:Objext.definePropety()定义对象新属性或修改原有属性

    Object.definePropety(obj,prop,descript)

    参数

    obj 必须。目标对象

    prop:必须。需要定义获修改属性的名子

    descript:必须。目标属性所拥有的特性

    Objext.definePropety() 第三个参数descript说明:以对象形式书写

    value():设置属性值 默认为undefine

    writeble:值是否可重写。true|false 默认 false

    enumerable:目标属性是否可枚举。true|false  默认false

    configurable:目标属性是否可以被删除或者是否可以再次修改特性true|false  默认false

11:函数的定义调用

    1:函数的定义方式

      1:函数声明方式function 关键字

      2:函数表达式(匿名函数)

      3:new function


    2:语法

      var fn = new Function('参数1','参数2','函数体')

      1:Function里面参数都必须是字符串格式

    3:函数内this的指向

    这些this的指向,是当我们调用函数的时候确定的,调用方式的不同决定了this的指向不同

    一般指向我们的调用者

    调用方式                this指向

    普通函数                  window 

    构造函数调用            实例对象,原型对象里的方法也指向实例对象

    对象方法调用            该方法所属对象

    事件绑定方法            绑定事件对象

    定时器函数                window

    立即执行函数              window

    4:改变函数内的this指向  js提供了三种方法 call()  apply()  bind()

    1:call()

        1:call()  第一可以调用函数  第二个可以改变函数内的this指向

        2:call()  的主要作用可以实现继承

    2:apply() 

        fun.apply(thisArg,[argsArray])

        1: thisArg:在fun函数运行时指定的this值

        2:argsArray:传递的值,必须包含在数组里面(必须是数组/为数组)

        3:返回值就是函数的返回值,因为他就是调用函数

        4:主要应用

      3:bind()


        bind()方法不会调用函数,但是能改变函数内部this

        bind(thisArg,arg1,arg2,...)

        1:thisArg:在fun函数运行时指定的this值

        2:arg1,arg2:传递其他参数

        3:返回由指定this值和初始化参数改造后原函数拷贝

        4:如果我们有一个函数不需要立即执行,但又想改变这个函数内部this指向

12:严格模式

  采用具有限定js变体得一种方式,在严格模式下运行js代码

  ie10以上支持

  1:减少一些不合理不严谨之处,减少了怪异行为

  2:消除代码不安全之处,保证代码安全

  3:提高编译效率,增加运行速度

  4:禁用了未来版本可能出现得语法


  开启严格模式

  在所有语句之前加上'use srtict'或'usestrict'

  为某个函数指行严格模式,在函数体里面第一句加上'use srtict'或'usestrict'

  1:函数必须先声明,后赋值再使用

  2:严谨删除已经声明变量。例如用delete语法删除是错误的

  3:严格模式下this全局作用域下this指向undefine

  4:严格模式下,如果构造函数不加new this会报错

  严格模式下函数变化

  函数不能有重名参数

13:闭包

    闭包是有权访问另一个函数作用域中变量的函数,简单就是,一个作用域可以访问另一个函数内部局部的变量

    作用:延申了变量的作用域

14:递归

  如果一个函数在内部可以调用其本身,那么这个函数就是递归

  递归里面必须加推出条件,防止栈溢出

15:浅拷贝与深拷贝

    es6:Object.assign(target,...source)    浅拷贝

16:创建正则表达式

    1:通过调用RegExp对象的构造函数创建

    var 变量名 =  new RegExp

  2:通过字面量创建

    var 变量名 = /表达式/

  3:检测正则表达式tes

    test()正则对象方法,用于检测字符串是否符合该规则true/false

    语法

    regexObj.test(str)

    1:regexObj  是写的正则表达式

    2:str 我们要检测的文本

    3:就是检测str文本是否符合我们写的正则表达式规范

    2:边界符

      正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符


      1:边界符        说明

      ^        表示匹配行首的文本(以谁开始)

      $        表示匹配行尾的文本(以谁结束)


      2:字符类


        1:[]  表示一系列字符可供选择,只要匹配其中一个就可以了

        2:[-] 方括号内部范围符-

        3:字符组合

        /^[a-zA-Z0-9]$/.test('a')  //true

        4:取反

        /^[^a-zA-Z0-9]$/.test('a')

        //如果[]里面有^ 表示取反的意思,千万和我们边界符 ^ 别混淆

        var rg = /^[^a-zA-Z0-9]$/


      3:量词符用来设定某个模式出现的次数

        量词        说明

        *        重复零次或者更多次

        +        重复一次或更多次

        ?        重复零次或一次

        {n}      重复n次

        {n,}      重复n次或更多次

        {n,m}    重复n到m次


      4:预定义类

        某些常见模式的简写属性

        预定义类      说明

        \d        匹配0-9之间,相当于[0-9]

        \D        匹配0-9以外之间,相当于[^0-9]

        \w          匹配所有字母,数字和下划线,相当于[a-zA-Z0-9_]

        \w          匹配所有字母,数字和下划线以外,相当于[a-zA-Z0-9_]

        \s          匹配空格(包括换行,制表符,空格符),相当于[\t\r\n\v\f]

        \S          匹配非空字符

        5:正则表达式或  | 

    6:对象结构

      按照一定模式,从数组或对象中取值,将取出来的值赋值给另外变量

        1:数组结构

          let [a,b,c] = [1,2,3]//这里[]在等号的左边,不代表数组,代表结构赋值,abc是三个变量

          console.log(a)  //1

          console.log(b)  //2

          console.log(c)  //3


        2:对象结构


        1对象结构允许我们使用变量的名子匹配对象的属性,匹配成功将对象属性的值赋值给变量

        let person = {name:'张三',age = 20}

        let {name,age} = person;

        console.log(name)//张三

        console.log(age)//20

        另一中写法

        let{name:myname,age:myage} = person  myname属于别名

        用name属性去匹配person里的name属性

        console.log(myname)//zhangsan

        console.log(myage)//21

    7:箭头函数

        箭头函数不绑定this,箭头函数中this,指向函数定义位置的上下文this

    8:剩余参数

      剩余参数语法允许我们将一个不定数量的参数表示一个数字

      function sum (first,...args){

        consoke.log(first)//10

        console.log(args)//[20,30]

      }

      sum(10,20,30)

    9:扩展运算符


      扩展运算符可以将数组或者对象用逗号分割成参参数序列

      let arr = [1,2,3]

      ...arr //1,2,3

      扩展运算符可以因功与合并数组上

      let ary1 = [1,2,3]

      let ary0 = [4,5,6]

      let ary3 = [...ary1,...ary2]

      方法2

      ary1.push(...ary2)

      可以将为数组转换成真正的数组

10:Array扩展方法

    1: Array.form()

      可以将为数组或可便利对象转换为真正的数组

      let arraylike = {

        '0':'a',

        '1':'b',

        '2':'c',

        length:3  必须有length

      }

      let arr2 = Array.form(arraylike)

      Array.form()方法可以接受第二个参数,作用类似于数组中的map方法,用来对每个数组进行处理,将处理后的结果放入返回后的数组

          let arraylike = {

        '0':'a',

        '1':'b',

        '2':'c',

        length:3  必须有length

      }

      let arr2 = Array.form(arraylike,item=>item*2)


  2:find()

    用于找出第一个符合条件的数组成员,如果没有找到返回undefined

    let ary = [{

      id = 1,

      name:'张三'

    },

    {

      id:2,

      name:'isi1'

    }]

    let target = ary.find(item,index)=>{item.id == 1}

    3:findIndex()

      用于找出第一个符合条件的数组成员的位置,如果没有返回-1

      4:includes()

        表示某个数组是否包含给定的值,返回布尔值

        [1,2,3].includes(2)//true

  11:string扩展方法

    1: staertWith():表示参数字符串是否在原字符串的头部

      endWidth():表示参数字符串是否在原字符串的尾部

      let  str = 'Hello word'

      str.startWith('Hello')//true

      str.endWidth('d')//true


    2:repeat()

      repeat() 方法表示将原字符串重复n次,返回新字符串

      'x'.repeat(3)//xxx

12:set数据结构

    1:set数据结构类似于数学组,但是成员的值是唯一的,没有重复的值

    Set本身是一个构造函数,用来生成Set数据结构

    const s = new Set();

    Set 函数可以jies一个数组作为参数,用来初始化

    const set = new Set([1,2,3,4,5,6])

  2:利用set数据结构可以用来做数组去重

  const s2 = new Set[1,1,2,2,3,3,4,4,5,6,6,9]

  console.log(s2)


    3:实例方法

      1:add(value)        添加某个值,返回Set本身

      2:delete(value)      删除某个值,返回一个布尔值,表示删除成功

    3: has(value)            返回一个布尔值,表示该值是否为Set成员

      4:clear()              清楚所有成员

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,558评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,002评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,024评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,144评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,255评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,295评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,068评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,478评论 1 305
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,789评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,965评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,649评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,267评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,982评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,800评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,847评论 2 351

推荐阅读更多精彩内容