欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript - 面向对象

程序员文章站 2022-03-20 18:48:33
1 创建对象 在 JavaScript 中可以通过多种方式创建对象。 1.1 字面量的方式 优点:写起来简单方便 缺点:如果要生成大量的类似的对象,那么将会写一堆重复的代码 1.2 工厂模式 优点:可以快速生成批量的对象 缺点:对象的同样的方法(函数),每创建一个对象,都会生成一个一摸一样的函数,所 ......

1 创建对象

在 javascript 中可以通过多种方式创建对象。

1.1 字面量的方式

var student = {
    name:"某某某",
    type:"练习生",
    like:"唱跳rap篮球",
    rap:function(){
        console.log("x你太美")
    }
}

console.log(student)
student.rap()
  • 优点:写起来简单方便
  • 缺点:如果要生成大量的类似的对象,那么将会写一堆重复的代码

1.2 工厂模式

function student(name,type,like){
    return {
        name:name,
        type:type,
        like:like,
        rap:function(){
            console.log("x你太美")
        }
    }
}

var s1 = student("某某某","篮球运动员",'篮球')
console.log(s1)
  • 优点:可以快速生成批量的对象
  • 缺点:对象的同样的方法(函数),每创建一个对象,都会生成一个一摸一样的函数,所以会占用很多不必要的内存

1.3 构造函数创建对象

function teacher(name,type){
    this.name = name;
    this.type = type;
    this.rap = function(){
        console.log(":)");
    }
}

var t1 = new teacher('苍老师','演员');
t1.rap();

如果不用 new 来调用函数,那么就是一个普通的函数调用,并且 this 的指向是 window 关键字
如果用了 new,就会创建一个新的对象,并且将对象给到 t1

这种方法还是会生成很多同样的方法,我们可以这样改进:

function teacher(name,type){
    this.name = name;
    this.type = type;
    /*
    this.rap = function(){
        console.log(":)");
    }
    */
}
teacher.prototype.rap = function () {
    console.log(':)');
}
var t1 = new teacher('苍老师','演员');
t1.rap();

这样就可以让多个 teacher 的对象共用一个方法,我们可以在控制台中看到,实际上这个方法存在父类(prototype)里面。

Javascript - 面向对象

1.4 es6 的 class 写法

前面的方法其实逻辑多少都有点怪异,我们一般采用这种 class 的写法。只是语法变得更人性化,实际上的底层操作方式,还是前面三种方法。

class student{
    constructor(name,type){
        this.name = name;
        this.type = type;
    }
    rap(){
        console.log(':(');
    }
}
var t2 = new student('加藤鹰','演员');

通过控制台可以看到,底层的处理方式是一样的,但是这种写法更易于解读。

Javascript - 面向对象

2 继承

这里直接让 student 继承 teacher

function teacher(name,type){
    this.name = name;
    this.type = type;
    /*
    this.rap = function(){
        console.log(":)");
    }
    */
}
teacher.prototype.rap = function () {
    console.log(':)');
}
var t1 = new teacher('苍老师','演员');
t1.rap();

class student extends teacher{
    constructor(name,type){
        super();
        this.name = name;
        this.type = type;
    }
    rap(){
        console.log(':(');
    }
}
var t2 = new student('加藤鹰','演员');

注意,子类的构造器一定要有 super() 语句,调用父类构造器。

当我们用控制台调用 t2 的 rap 方法,输出是 “:(”,我们要通过 t2._proto_._proto_.rap() 才能访问到父类的同名方法。

Javascript - 面向对象

3 dom 对象

dom 对象,就是 html 页面的文档对象。整个网页的显示,都由 document 对象构成。文档对象又由许多的元素对象构成,文档对象就有许多的属性和方法,用来操纵整个页面的显示,以及事件的处理。所有的元素对象最终组成庞大的 dom 树。

3.1 查找 dom 对象

在 es5 以前,我们可以通过 id,class,标签名查找元素对象。

//通过id查找元素对象
var d1 = document.getelementbyid("d1")
console.log(d1)
//通过class查找元素对象
var abc = document.getelementsbyclassname('abc')
console.log(abc)
//通过标签名称查找元素对象
var div = document.getelementsbytagname("div")
console.log(div)

通过 class 和 标签名找出来的是元素数组

es5 后,可以用我们写 css 时的选择器的方式查找元素对象,更精确,更方便。

//选择单个元素,document.queryselector,选择器的写法,直接使用css选择器的写法,选择器如果能够匹配过个元素,那么只选择第一个元素
var div1 =  document.queryselector("div")
console.log(div1)
var id1 = document.queryselector("#d1")
console.log(id1)
var abc1 = document.queryselector('body .abc')
console.log(abc1)

//选择多个元素,document.queryselectorall()
var abc2 = document.queryselectorall("#d1")
console.log(abc2)

3.2 设置 dom 对象

找到了我们所需要的元素之后,我们就需要对元素内部的属性进行修改。

标签间的内容都存储在元素的 innerhtml 属性里面,例如我们想对某个 style 标签的内容进行修改:

s1.innerhtml = 'h1{color: red;}';

我们也可以在获得元素对象后,直接设置元素的样式:

element.style.background = "skyblue";
element.style.color = "yellow";

我们可以在元素(标签)内再插入元素(标签)。步骤是先用 createlement 方法创建子元素,接着设置好子元素的内容后,用父元素的 appendchild 方法将其插入。

//创建元素
var s1 = document.createelement("style")
//设置s1的innerhtml的内容
s1.innerhtml = 'h1{color: red;}';
//将style元素插入到html页面的body里
document.body.appendchild(s1)

元素具有的所有属性我们都可以通过控制台查看并对其进行修改,方法和上述方法都大同小异。

4 事件

每一个事件调用的执行函数,都会默认传入一个事件对象,这个对象会包含当次事件的相关信息,例如点击、鼠标的移动、键盘的按键、手指的触屏、聚焦等等。事件根据捕获方式分为“冒泡事件”、“捕获事件”。

冒泡事件:事件由最里面一层一层向上触发,直到html元素,那么这种事件模式就是冒泡事件。默认情况下就用冒泡。
捕获事件:由html开始一层一层向下出发,直到最小的子元素,那么这种事件模式就是捕获

4.1 on

我们可以通过 "on事件名称 = function(){}" 的方法设置时间,这种方法简单方便,但缺点也很明显,一个事件只能调用一个函数,而且只能是“冒泡事件”。

h1.onclick = function(){
    h1.style.backgroundcolor = "deeppink"
}

这种写法可以写在 script 标签里,也可以直接在元素的标签内作为属性写入,属性的值为一个方法,例如

<h1 onclick="abc()">helloworld</h1>
<script type="text/javascript"> 
    function abc(){
        h1.style.color = "skyblue"
    }
</script>

4.2 addeventlistener

这种方式是 es5 之后才有的,同一事件可以通过几个 addeventlistener 语句调用多个函数,而且可以手动设置是捕获事件还是冒泡事件。语法:

h1.addeventlistener("事件的名称",事件调用起的函数(),true/false(捕获/冒泡))

最后一个参数省略就是默认 false

4.3 事件对象

每次事件调用执行函数前,会将对应的事件对象作为参数传入,例如对于点击事件,我们可以通过事件获得点击点的坐标,点击的时间等信息。

<h1>helloworld</h1>
<script type="text/javascript">
    var h1 = document.queryselector('h1')
    h1.onclick = function(event){
        //事件对象会存放这一次事件的相关信息
        console.log(event)
    }
</script>