JavaScript面相对象

最新推荐文章于 2024-07-29 11:53:27 发布

Song propositions

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量225

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_73140902/article/details/126413148

版权

什么是面相对象？

面向对象——行为化（概念相对抽象，可结合下面的例子理解）

面向对象是把整个需求按照特点、功能划分，将这些存在共性的部分封装成类（类实例化后才是对象），创建了对象不是为了完成某一个步骤，而是描述某个事物在解决问题的步骤中的行为

面相对象又分es5和es6两种写法

1、es5的创建对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //构造函数 缺点是为每个对象的方法都创建单独的空间会造成空间的浪费
    //所以利用构造函数创建对象解决方式是可以将方法挂载到原型上做成公共的方法，这样就可以避免空间的浪费，是目前最好的解决方法
    //es5创建对象的方法是将属性放在构造方法中将方法挂载到构造方法的原型上，是创建对象最完美的解决方法 构造方法原型模式
    function Person(name,age){
        this.name=name
        this.age=age
    }
    Person.prototype.say=function(){
        console.log(this.name+"说实话")
    }

    var per1=new Person('小四',20)
    var per2=new Person('小五',21)
    per1.say()
    per2.say()
   console.log(per1.say==per2.say)
</script>

2、es6的面相对象。

es6新增了class类，是es5构造函数+原型定义对象的语法糖

语法：

class 类名{
	//构造函数  当new对象的时候会自动的执行 不用自行调用
	constructor(形参列表){
		//属性赋值
	}
	//方法相当于原型上的方法
	方法(){
	
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    class Person{
        //构造方法
        constructor(name,age){
            //做一些属性初始化的操作
            this.name=name
            this.age=age
            console.log('自行执行')
        }
        //方法
        say(){
            console.log(this.name+"说：js很好学")
        }

    }
    var per1=new Person('小四',21)
    var per2=new Person('小五',20)
    console.log(per1)
    per1.say()
    per2.say()
    console.log(per1.say===per2.say)
</script>

es6案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p><input type="text" v-model="username"></p>
        <p><input type="text" v-model="age"></p>
    </div>
</body>
</html>
<script>
class Vue{
    //构造方法
    constructor(options){
        //获取到dom元素
        this.$el=document.querySelector(options.el)
        //获取到data变量的值存入到$data中
        this.$data=options.data
       //获取到所有的文本框 
        this.$input=Array.from(document.querySelectorAll(options.el + " input"))
        //调用setHtml
        this.setHtml()
        //调用
        this.setData()
    }
    //将data属性的值写入到html中
    setHtml(){
       //遍历$input属性 获取到v-model的属性值 然后将 $data属性值写入value属性
       this.$input.forEach(item=>{
           var name=item.getAttribute("v-model")
           item.value=this.$data[name]
       })
    }
    //当html的值发生改变的时候给data属性赋值
    setData(){
        this.$input.forEach(item=>{
            var that=this
            item.oninput=function(){
               var name=this.getAttribute("v-model")
               that.$data[name]=this.value
            }
        })
    }
}
new Vue({
    el:"#app",
    data:{
        username:"小四",
        age:20
    }
})
</script>

3、es6继承与静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    class Person{
        //构造方法
        constructor(name,age){
            //做一些属性初始化的操作
            this.name=name
            this.age=age
            console.log('自行执行')
        }
        //方法
        say(){
            console.log(this.name+"说：js很好学")
        }
    }
    var per1=new Person('小四',21)
    var per2=new Person('小五',20)
    console.log(per1)
    per1.say()
    per2.say()
    console.log(per1.say===per2.say)
    //子类通过extends关键字继承父类
    class Student extends Person{
        //子类可以有自己的构造方法 但是必须在自己的构造方法中通过super()调用父类的构造方法
        constructor(name,age,stuno){
            super(name,age)
            this.no=stuno
        }
        //子类可以有自己的方法 也可以有和父类同名的方法 
        say(){
            console.log(1234)
        }
        //利用static关键字定义的方法称为静态方法 静态方法必须由类名来调用
        static run(){
            console.log('2109A班的学生会跑步')
        }
    }
    var stu1=new Student('小三',20,'110')
    console.log(stu1)
    stu1.say()
    Student.run()
</script>

Song propositions

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面相对象

面向对象——行为化（概念相对抽象，可结合下面的例子理解）面向对象是把整个需求按照特点、功能划分，将这些存在共性的部分封装成类（类实例化后才是对象），创建了对象不是为了完成某一个步骤，而是描述某个事物在解决问题的步骤中的行为。...
复制链接

扫一扫