JavaScript面向对象编程

最新推荐文章于 2024-04-18 07:25:30 发布

小梦新靓

最新推荐文章于 2024-04-18 07:25:30 发布

阅读量166

点赞数

分类专栏： JavaScript高级

本文链接：https://blog.csdn.net/qq_43712187/article/details/101229384

版权

JavaScript高级专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、为什么学习面向对象：简单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //打印学生的成绩表
            //1、面向过程的方式
            //1、1记录学生的成绩
            var stu1={
                name:'zs',
                subject:'语文',
                score:'99'
            };
                var stu2={
                name:'li',
                subject:'语文',
                score:'79'
            };
            console.log(stu1.name+'='+stu2.name);
        //2、面向对象的方式
        //创建一个模板，用于创建对象（实例instance）
        //在javascript中创建对象的模板是构造函数
        //而在其他语言中创建对象的模板是类
        function Student(name,subject,score){
//            属性
            this.name=name;
            this.subject=subject;
            this.score=score;
//        方法
            this.printScore=function(){
                console.log(this.name,this.subject,this.score);
            }
        }
        var stu1=new Student('zs','语文',90);
        var stu2=new Student('ls','语文',97);
        stu1.printScore();
        stu2.printScore();
        //目的便于维护
        </script>
    </body>
</html>

二、创建对象方法

1、系统自带的创建

    <script type="text/javascript">
        //创建对象反方法
	    //1、系统自带new  Object()
	    var hero=new Object();//空对象
		//        js动态可以添加
		//王者荣耀
		hero.blood=100;//血
		hero.name='刘备';//人物
		hero.weapon='剑';
		hero.attack=function(){
    console.log(this.weapon+'攻击');
}      
    </script>

2、字面量

<script>
    var hero={
        blood:100,
        name:'关羽',
        weapon:'刀',
        attack:function(){
            console.log(this.weapon);
        }
    }
    </script>

缺点：代码会冗余，不利于开发

3、工厂函数，创建多个对象

    function creatHero(name,blood,weapon)
    {
        var hero =new Object();
        hero.blood=100;//血
        hero.name='刘备';//人物
        hero.weapon='剑';
        hero.attack=function(){
            console.log(this.weapon+'攻击');
        }
        return hero;
    }
    var hero1=creatHero('刘备',100,'jian');
    var hero2=creatHero('刘备',100,'jian');
    </script>

缺点：构造函数创建的对象不能明确到底是什么对象–不方便判断具体类型
console.log(typeof hero);-----Object
var arr=[];console.log(typeof arr);-----Object

判断是否是谁的对象 instanceof —boolean值console.log(arr instanceof Array);–但工厂函数没有不能用instanceof

4、构造函数—创造对象的函数
构造函数的名字首字母要大写：区分普通函数,并且没有返回值

    
    function Hero(name,blood,weapon){
        this.name=name;
        this.blood=blood;
        this.weapon=weapon;
        
        this.attack=function(){
            console.log(this.weapon);
        }
    }
    //使用
    var hero=new Hero('刘备',100,'剑');
    hero.attack();

与工厂函数的区别：工厂函数就是普通函数首字母就是小写
1、会在内存中创建一个空对象
2、设置构造函数的this，让this指向刚刚创建的对象
3、执行构造函数的代码
4、返回对象

判断构造函数创建的对象construct

var hero=new Hero('刘备',100,'剑');
    hero.attack();
    console.log(hero.constructor);
    var arr=[];
console.log(typeof hero);---不可以获取
console.log(arr.constructor);

ƒ Hero(name,blood,weapon){
this.name=name;
this.blood=blood;
this.weapon=weapon;
this.attack=function(){
console.log(this.weapon);
}
}
Array() { [native code] }–系统构造函数无法获取内容

注意：

constructor构造器获取对象的具体类型
console.log(hero.constructor===Hero);
console.log(arr.constructor====Array);

使用：instanceof 判断某个对象是否是某个构造函数的实例/对象
eg:console.log(hero instance Hero);–true
console.log(array instance Array);–true

三、当对象只有一个的时候可以直接用字面量{}创建对象，当有很多的时候用构造函数的形式

静态成员：直接使用对象来调用eg：Math.round();数学对象
实例成员：构造函数的成员就是实例成员–先new实例化在使用

四、构造函数的原型学习

构造函数的this谁调用就是谁
上面的存在上面问题就是内存浪费，影响速度
多个对象创造多个sayHi

在这里插入图片描述

false地址不同

解决存储多分这个问题：
方法一：函数写在全局公共调用

    //构造函数的名字首字母要大写：区分普通函数
    function Student(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
        //多个对象，会存储多个sayHi
        this.sayHi=sayHi;
    }
    function sayHi()
    {
        console.log(this.name);
    }
    var s1=new Student('lllia',18,'男');
var s2=new Student('laads',11,'女');
console.log(s1.sayHi===s2.sayHi)
    </script>

此方法有局限
方法二：原型

什么是原型：每一个构造函数都有一个属性就是原型/原型对象

function Student(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
        //多个对象，会存储多个sayHi

    }
Student.prototype.SayHi=function(){
console.log(this.name);
}
    console.dir(Student);//打印结构

在这里插入图片描述
通过Student构造函数，创建的对象，可以访问Student.prototype中的成员它解决了内存多用且它还是一个对象

因此可以通过原型来添加方法
什么是__proto__?
----调用先找构造函数是否存在，若不存在再去找原型中的对象的属性和方法，若果对象本身没有该属性/方法且原型也没有就会报错
__proto__对象就是prototype
__proto__属性是非标准的属性
console.log(s1.proto===Student.prototype)一个是实例化的后面是构造函数的，但是地址是相同的
原型对象中有一个属性constructor构造函数它实例化的对象可以访问—作用：记录了床创建该对象的构造函数，记录了该对象的构造函数
console.log(s1.constructor===Student)—true

五、构造函数原型对象实例/对象之间的关系

在这里插入图片描述

六、原型链

要清楚：原型对象里面也有对象所以就形成链式样子

var o=s1.__proto__;
console.dir(0.__proto__);---object

在这里插入图片描述

属性查找规则：先在构造函数查找，找不到去原型对象中查找若没有继续往里面找若最后是null则表示没有

构造函数的原型对象是对象可以添加属性和方法若和构造函数属性相同的时候先找构造函数
注意设置属性的时候：若创建了两个对象，若果一个对象更改了原型的值，另一个会不会发生变化？—不会查找原型链而是直接在对象中添加
–不会它会在对象中添加属性而不是在原型链中找，屏蔽了原型链

七、使用原型链的注意点

一般情况下，对象的属性在构造函数来设置
一般情况下，对象的方法在构造函数的原型对象中来设置

Student.prototype.eat=function(){
}
Student.prototype.sayHi=function(){
}

—若方法多则不好可以重新改变原型对象的prototype属性，色湖之为一个新的对象

Student.prototype={
sayHi:function(){
},
eat:function(){
}
}

—上面的又不好s1.constructor就不起作用了：因为修改了prototype就成了修改的内容了
—自己设置

Student.prototype={
constructor:Student,
sayHi:function(){
},
eat:function(){
}
}

当我们改变构造函数的prototype的时候，需要重新设置constructor属性
先去设置原型属性，再去创建对象，才可以访问对象的成员

八、扩展内置对象

var array=[5,4,21,1];
Array.prototype.getSum=function(){
var sum=0;
for(var i=0;i<this.length;i++){
if(this[i]%2==0)
{
sum+=this[i];
}
}
return sum;
}

内置对象就增加了一个函数求偶数和
数组或者String内置对象中的prototype不允许修改系统自动屏蔽
很多的就Array.prototype={

}===不可以–全部被修改了

小梦新靓

关注

0
点赞
踩
0

收藏

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

一、为什么学习面向对象：简单<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type...
复制链接

扫一扫