一.面向对象

1.面向对象编程介绍

1.1 面向对象:是一种解决问题注重结果的思维方式

面向过程:注重的是过程

面向对象:注重的是结果

1.2 面向对象本质是对面向过程的封装

2.面向对象编程举例

2.1 给页面每一个div标签和p标签设置颜色和边框

 (1)方式一
   //获取元素
  let divList = document.querySelectorAll("div")
  let pList = document.querySelectorAll("p")   
   //对象封装
  let obj = {
  setColor: function (list, color) {
    for (let i = 0; i < list.length; i++) {
      list[i].style.backgroundColor = color
    }
  },
  setBorder: function (list, border) {
    for (let i = 0; i < list.length; i++) {
      list[i].style.border = border
    }
  }
}
  //设置颜色
  obj.setColor(divList, "red")
  obj.setColor(pList, "cyan")
  
  (2)方式二
  $('div,p').css('backgroundColor','red').css('border', '5px solid cyan')

二.内置对象

1.数组对象

(1)concat

代码 : arr.concat(数组)

作用:连接数组,返回值是连接后的数组

(2)reverse

代码 : arr.reverse()

作用:翻转数组

(3)join

代码 : arr.join('分隔符')

作用:把数组每一个元素拼接成字符串在页面显示

(4)sort

代码 : arr.sort( function(a,b){return a-b} )

arr.sort(function(a,b){
            return a-b    // 从小到大
            return b-a    // 从大到小
            })

作用:排列数组

2.字符串对象

(1) 字符串类似于数组,也有长度和下标

str.length

str[下标]

(2)indexOf

代码: str.indexOf('字符串')

作用:获取'字符串'在str中的首字母下标.

如果字符串存在则返回首字母下标,如果字符串不存在则返回固定值-1

(3)split

代码: str.split('分隔符')

作用:用分隔符切割字符串,得到切割之后的数组.(分隔符是哪个就从哪个切开)

例如:

 let url = 'http://www.baidu.com?name=张三&age=20'
  console.log(url.split('|')) //['http://www.baidu.com?name=张三&age=20']
  console.log(url.split('?')) //['http://www.baidu.com', 'name=张三&age=20']
  console.log(url.split('=')) //['http://www.baidu.com?name', '张三&age', '20']

(4)substr

代码:str.substr(起始下标,截取长度)

作用:从下标开始截取长度的字符,截取字符串

(5)字母大小写转换

toLocaleLowerCase() 转换小写

toLocaleUpperCase() 转换大写

console.log('dsSFJSGDJHsdfs'.toLocaleLowerCase()) //小写 dssfjsgdjhsdfs console.log('dsSFJSGDJHsdfs'.toLocaleUpperCase()) //大写 DSSFJSGDJHSDFS

三.原型对象

1.工厂函数

工厂函数:用于创建对象的函数

需求:需要创建很多个对象

function createPerson(name, age, sex) {
            //1.创建对象
            let p = {}
            //2.给对象赋值
            p.name = name
            p.age = age
            p.sex = sex
            //3. 返回对象
            return p
        }

        let p1 = createPerson('张三', 20, '男')
        let p2 = createPerson('李四', 22, '女')

2.构造函数new原理(重点)

2.1 构造函数:使用new调用一个函数

构造函数作用与工厂函数一致,都是用来创建对象的,但是构造函数代码更加简介.

2.2 构造函数new工作原理

(1)创建空对象

(2)this指向这个对象

(3)对象赋值

(4)返回这个对象

2.3 构造函数new在使用时需要注意的地方

(1)构造函数首字母一般大写,为了提醒调用者不要忘记new关键字

(2)如果在构造函数内部手动return

    return值类型:无效,还是返回new创建的对象
    
    return引用类型:有效,会覆盖new创建的对象


        function Person(name, age, sex) {
            //(1)创建空对象   {}
            //(2)this指向这个对象  this = {}
            //(3)对象赋值
            this.name = name
            this.age = age
            this.sex = sex
            //(4)返回这个对象 return this
            return
        }

        let p1 = new Person('付齐', 80, '人妖')

3.原型对象

1.原型对象是什么?

任何函数在声明的时候，系统会自动帮你创建一个对象，称之为原型对象

2.原型对象作用?

解决构造函数内存浪费 + 变量污染

3.原型对象相关三个属性

(1)prototype : 属于构造函数, 指向原型对象

         *解决构造函数内存浪费+变量污染

(2)_ proto _ : 属于实例对象,指向原型对象

         *让实例对象直接访问原型的成员

(3)constructor : 属于原型对象，指向构造函数

         作用:可以让实例对象知道自己是被哪个构造函数创建的

  //构造函数
    function Person(name, age) {
      this.name = name
      this.age = age
    }

    //原型对象
    console.log(Person.prototype)
    Person.prototype = {
      eat: function () {
        console.log("吃东西")
      },
      learn: function () {
        console.log("学习")
      }
    }
    //实例对象 : 用new调用构造函数，返回的那个对象(new创建的那个对象)
    let p1 = new Person('张三', 20)
    console.log(p1)

    let p2 = new Person('李四', 22)
    console.log(p1.eat == p2.eat) //true

4.静态成员与实例成员

静态成员：函数的属性

实例成员：实例对象的属性

  function Person(name,age){
           this.name = name
           this.age = age
       }

       let p1 = new Person('张三',20)
       console.log( p1.name )//实例成员
       console.log( p1.age )//实例成员

       console.log( Person.prototype )//静态成员
       console.log( Math.PI ) //静态成员

5.Object的value方法

需求：获取对象所有的属性值

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

    1 以前的写法：  for-in 循环
    for (let key in person) {
        console.log(person[key])
    }

    2.静态方法  Object.values(对象名)
    //返回值是一个数组,会存储对象每一个属性值
    let arr = Object.values(person)
    console.log(arr)
    
    //返回值是一个数组,会存储对象每一个属性名
    console.log(Object.keys(person))

js高级中的对象方法