前端

javascript高级

2019-07-31  本文已影响3人  59e89c043543

面向对象也即是OOP,Object Oriented Programming,是计算机的一种编程架构,OOP的基本原则是计算机是由子程序作用的单个或者多个对象组合而成,包含属性和方法的对象是类的实例,但是JavaScript中没有类的概念,而是直接使用对象来实现编程

JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力


字面式创建对象

    var person = {

        name: "hentai",

        age: 20,

        height: 183,

        weight: 75,

        job: "Doctor",

        say: function () {

            alert(this.name);

        },

        eat: function () {

            alert(this.weight);

        }

    };

    person.say();

    person.eat();



构造函数创建对象

    按照惯例:构造函数以大写字母开头,普通函数以小写字母开头

    function Person(name, height, weight) {

        this.name = name;

        this.height = height;

        this.weight = weight;

        this.sayName = function () {

            alert(this.name)

        }

    }

    //new一个具体的实例

    var person1 = new Person("lucy", 17, 43);

    var person2 = new Person("nazi", 18, 60);

    var person3 = new Person("grey", 18, 62);

    person1.sayName();

    alert(person2.name)

    //为新对象添加属性

    person1.sex = "女";

    //返回新对象

    alert(person1.sex)



使用原型方式,不能通过给构造函数

    传递参数来初始化属性的值, 必须在对象创建后才能改变属性的默认值

    function Person() {}

    Person.prototype.name = "Nico";

    Person.prototype.age = 29;

    Person.prototype.job = [1, 2];

    Person.prototype.sayName = function () {

        alert(this.name);

    }

    var person1 = new Person();

    person1.sayName();

    var person2 = new Person();

    person1.job.push(3)

    console.log(person1.job)

    console.log(person2.job)



//组合使用构造函数和原型模式

    //使用这种模式创建对象,每个实例

    //都会有自己的一份实例属性的副本,

    //但同时又共享着对方法的引用,最大限度地节省了内存,

    function Person(name,age,job){

        this.name=name;

        this.age=age;

        this.job=job;

        this.sayName=function(){

            alert(this.name)

        }

    }

    Person.prototype={

        sayJob:function(){

            alert(this.job)

        }

    }

    var person1=new Person("Alusa",18,"dancer")

    person1.sayName();


慢慢理解函数的结构,每个模式都有各自的优缺点,看自己的选择。

上一篇下一篇

猜你喜欢

热点阅读