前端：Javascript之面向对象

最新推荐文章于 2022-07-20 20:55:18 发布

dream_Felix

最新推荐文章于 2022-07-20 20:55:18 发布

阅读量157

点赞数

文章标签： java学习

本文链接：https://blog.csdn.net/yalu_123456/article/details/93621011

版权

回顾JavaScript数据类型

JavaScript中的基本数据类型

number(数值类型)
string(字符串类型)
boolean(布尔类型)
null(空类型)
undefined(未定义类型)
object

什么是对象

对象是包含相关属性和方法的集合体
属性
方法
什么是面向对象
面向对象仅仅是一个概念或者编程思想
通过一种叫做原型的方式来实现面向对象编程

自定义对象2-1

基于Object对象的方式创建对象
var 对象名称=new Object( );
var student=new Object();
student.name=“小明”;
student.age=“18”;
student.address=“中国台湾雄县”;
student.uses=“小明和老师”;
student.showName=function(){ alert(this.name); }
student.showName();

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    //创建一个对象,通过new Object();
    var person = new Object();

    //给对象附属性  对象.属性名 = 属性值;
    person.name = "小明";
    person.age = 18;
    person.sex = '男';

    //给对象附属性  对象.方法名 = 方法;
    person.showName = function () {
        alert(this.name);
    };

    //调用方法
    person.showName();

</script>


</body>
</html>

自定义对象2-2

使用字面量赋值方式创建对象
var student={
name : “小明”,
age : “18”,
address : “中国台湾台北”,
uses : “潘多拉”,
showName : function(){ alert(this.name); }
} s
tudent.showName();

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //使用花括号定义一个对象
    //值注意点:
    //使用冒号赋值
    //多个属性之间使用逗号隔开
    //最后一个属性或者方法不需要加逗号;
    var student = {
        name:"小学生",
        age:3,
        sex:'男',

        showName:function () {
            document.write(this.name)
        }
    };

    console.log(student);



</script>

</body>
</html>

内置对象2-1

常见的内置对象
String（字符串）对象
Date（日期）对象
Array（数组）对象
Boolean（逻辑）对象
Math（算数）对象
RegExp对象

内置对象2-2

String（字符串）对象
length属性
indexOf( )方法、replace( )方法
Date（日期）对象
get×××：获取年、月、日、时、分、秒等等
set×××：设置年、月、日、时、分、秒等等
Ar ay（数组）对象
length属性
sort( )、concat( )、join( )方法
Boolean（逻辑）对象
true或者false
toString( )方法
RegExp对象
RegExp是正则表达式的缩写
Math（算数）对象
round( )、max( )、min( )方法

构造函数和原型对象

如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？
构造函数
原型对象

创建构造函数

function Student(name,sex,age,mail){
this.name=name;
…….
this.showName=function(){
alert(this.name);
}
}
var Student=new Student(“小明”,“boy”,“18”,“1345679855@qq.com”)
flower1.showName();
构造函数始终都应该以一个大写字母开头

constructor属性

constructor属性指向Flower

alert(student1.constructor==Flower);
alert(student2.constructor==Flower);
alert(student3.constructor==Flower);

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>


    //如果要创建多个同类型的对象 , 就使用构造方法创建
    function person(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.showName = function () {
            alert(this.name)
        }
    }

    var student1 = new person("小明",3,'男');
    var student2 = new person("小学生",3,'男');
    var student3 = new person("狂神",3,'男');

    console.log(student1);
    console.log(student2);
    console.log(student3);



</script>


</body>
</html>

instanceof操作符

使用instanceof操作符检测对象类型
alert(flower1 instanceof Object);
alert(flower1 instanceof Flower);
alert(flower2 instanceof Object);
alert(flower2 instanceof Flower);
alert(flower3 instanceof Object);
alert(flower3 instanceof Flower);

原型对象2-1

每个函数都有一个prototype属性，这个属性是一个指针，指向一个
对象
prototype就是通过调用构造函数而创建的那个对象实例的原型对象

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    function student() {

    }

    student.prototype.name="小明";
    student.prototype.age=18;
    student.prototype.sex="男";


    var stu = new student();

    console.log(stu);
    console.log(stu.name);

</script>





</body>
</html>

dream_Felix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：Javascript之面向对象

回顾JavaScript数据类型JavaScript中的基本数据类型number(数值类型)string(字符串类型)boolean(布尔类型)null(空类型)undefined(未定义类型)object什么是对象对象是包含相关属性和方法的集合体属性方法什么是面向对象面向对象仅仅是一个概念或者编程思想通过一种叫做原型的方式来实现面向对象编程自定义对象2-...
复制链接

扫一扫