js面向对象

2021-07-12 02:05

阅读:373

标签:student   方式   解决方案   str   dag   key   doc   了解   用处   

概述

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

如果这些事很多,且不同事情之间有关联关系,假如十件事写成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对象 

js面向对象

标签:student   方式   解决方案   str   dag   key   doc   了解   用处   

原文地址:https://www.cnblogs.com/gyxpy/p/14979240.html

上一篇:WebGPU性能测试分析

下一篇:HTML基本结构


评论


亲,登录后才可以留言!