js面向对象

时间：2021-07-07 17:49:46 收藏：0 阅读：0

概述

做一一些事，可以将他们封装为函数，反复调用。

如果这些事很多，且不同事情之间有关联关系，假如十件事写成10个函数

没有逻辑无序编排，且很有可能多个事情会公用数据。

编写后的代码杂乱无章。

OOP：封装信息，用特征与行为将一类事物提炼抽象出来。

基本语法同java，也借鉴了python的语法。

数据类型同java，下面就是一些需要记忆的点。

创建对象

1-构造函数创建

var stu = new object()
stu.name="zhang"
stu.hobby="rap"
stu.draw=function(){}

2-字面量方式创建对象

var stu = {
     name:"zhansan",
     age:18,
     draw:function(){
  　　  console.log(this.name)
  }
}

以key：value对的形式描述对象，key必须是字符串，因为此约定，不用加双引号。

stu["name"]===stu.name后者简单

但是当不知道属性名时才会不得已使用【】

例如遍历对象

for(let key in stu){
     console.log(stu[key])  
}
不知道对象的属性名，也不知道有多少属性
key变量指向stu的属性名。

this

解析器在调用函数时每次都会向函数内部传递一个隐含的参数this，

this指向的是函数执行的上下文,白话就是.前面的对象。

stu.draw() 和python中的self一样

alert(123)呢？

对于js中的函数而言，this指向的是window对象。

即便是自定义的函数，也是挂在window对象下面。

var stu = {
　　name:"zhangsan",
    draw(){
       console.log(this)  
    }
}
var stu1_draw = stu.draw
stu.draw() //{name: "zhangsan", draw: ?}

stu1_draw()//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

js中除了默认传this，还会默认传数组对象arguemnts，是个数组，里面放所有传进来的参数，可以用索引操作实参。

js中的类模板

批量创建某类对象

如果创建对象每次都var stu={}

且还是相同属性和行为的对象，就太麻烦了

funciton Student(name,age){
        this.name =name
        this.age=age
        this.draw=function(){
              console.log(this.name+this.age)
        }  

}
1--Student("dage",20) 不加new，同样可以创建对象，只不过里面的this指的就是window,就相当于调用了一个函数，为全局window创建了两个变量
2--加上new之后，new做了一件事，创建一个新的对象，让函数内部的this指向新的对象。此时的函数就是构造函数。
sut1 = new Student("zhansan",19)
stu2 = new Student("lisi",19）
Student（）就是一个普通函数，如果加了new就变成了构造函数。
而Studen大写就是一个约定而已，完全可以小写，但是规范要遵守。

es6中引入了class关键字，替换上面的function

class Student{
     constructor(name,age){
        this.name=name;
        this.age=age;
　　　　  this.draw=function(){}
        
}

写的多了，还赶不上上面的简便。

但是陷阱是函数对象，每次创建对象都单独创建了函数对象，造成内存浪费，但是这个函数应该是共享的一块内存。

js提供了解决方案---原型

原型

所有学生相同的行为全部放在原型里面----相当于一块共享内存。

所有的对象都有一个prototype对象，用来指定原型

创建任何一个函数，不管你是不是构造函数，解析器都会向函数中添加一个prototype属性，即原型对象。

如果是一个普通函数，那么原型对象对它而言没有用处。

class Student{
     constructor(name,age){
        this.name=name;
        this.age=age;
　　　}
　　 draw()()//提出来即可
}

funciton Student(name,age){
        this.name =name
        this.age=age
　　　　//设置原型对象，此对象里面的全部共享。
        this.prototype.draw=function(){
              console.log(this.name+this.age)
        }  

}

json数据

不同语言交流方式

json和js的对象表达方式很像

但是key必须用双引号引起来，单引号不可以，跟js的对象长得太像了，可能这就是为什么js对象的key不加双引号吧

｛
   “name ”:"zh",
   "age":18,
   "hello":function(){ //几乎不会传函数
       console.log("hello world")

   }    
 
｝

ajax异步加载数据后端传来的都是json格式数据

一般调试看到的数据已经转为了js对象