zoukankan      html  css  js  c++  java
  • 构造函数与实例化之间的关系和原型的引入

    我对构造函数与实例化之间的理解

    当我们的编程是面向对象的时候,
    先是抽象的过程=>然后实例化的过程
    比如我们抽象一个人,我知道一个人的基本信息。
    名称,年龄,性别,....等等
    我们把先是抽象的,在抽象完成后,我们在实例化。
    

    构造函数与实例化之间的关系?

    //这个自定义的构造函数在抽象
    function Person(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.say=function(){
            console.log("我叫",name)
        }
    }
    // 这个过程是实例化
    let per1=new Person('司藤',300,'女');
    per1.say();//调用
    
    
    //let per1=new Person('司藤',300,'女');
    通过上面这一行代码。
    我们可以得出一个结论:
    构造函数与实例对象之间的关系是:
    实例对象需要通过构造函数来创建的。
    同时:我们可以知道实例对象的构造器就是构造函数
    我们来证明这一句话是否正确;上面的代码不改变。
    console.log( per1.constructor===Person ) //返回的是true
    充分说明:实例对象的构造器就是构造函数这一句话是正确的。
    

    per1.say是否等于per2.say

     function Person(name,age,like) {
        this.name=name;
        this.age=age;
        this.like=like;
        this.say=function(){
            console.log('我可以不吃饭');
        }
    }
    var per1=new Person("司藤",300,'耍');
    var per2=new Person('白浅','10000','耍');
    per1.say();
    per2.say();
    console.log( per1.say==per2.say ) //false
    

    per1.say不等于per2.say得出的结论

    因为console.log( per1.say==per2.say ) //false
    我们可以得出一个结论。
    那就是per1.say()和per2.say()调用的不是同一个方法
    
    那么他们的内容是否是相等的的呢?
    console.log( per1.say()==per2.say() ) //true
    说明内容是相等的
    

    康康下面这一段代码出现的问题

    function Person(name,age,like) {
        this.name=name;
        this.age=age;
        this.like=like;
        this.say=function(){
            console.log('我可以不吃饭');
        }
    };
    for (var index = 0; index < 100; index++) {
        var per=new Person("司藤",300,'耍');
        per.say();
    }
    
    这一段代码是它在内存中开辟了100个空间。
    每个空间都有一个say方法。
    但是每一个say方法都是不同的。可是他们输出的内容是相同。
    或者说执行的逻辑是相同的。
    这样就造成了空间浪费。
    所以在项目中,这样就造成了浪费空间。
    我们可不可以来优化呢 ?
    

    优化代码解决造成空间浪费

    function comSay(){
        // 执行相同的逻辑
        console.log('我可以不吃饭')
    };
    
    function Person(name,age,like) {
        this.name=name;
        this.age=age;
        this.like=like;
        this.say=comSay;//不要加括号
    };
    var per1=new Person("司藤",300,'耍');
    var per2=new Person('白浅','10000','耍');
    console.log( per1.say==per2.say ) //true
    
    这样我们就节约了空间。
    每次调用的时候,都是同一个方法。
    

    处理使用这种方法,我们还可以使用原型的方式

    function Person(name,age,like) {
        this.name=name;
        this.age=age;
        this.like=like;
    };
    Person.prototype.comSay=function(){
        console.log('我可以不吃饭')
    }
    var per1=new Person("司藤",300,'耍');
    var per2=new Person('白浅','10000','耍');
    console.log( per1.comSay==per2.comSay ) //true
    // 我们还可以通过原型来解决数据共享
    
    原型的作用:数据共享,节约空间。
    
  • 相关阅读:
    UI进阶--UIPikcerView实现餐点搭配示例
    UI基础--UITableView实现仿QQ好友列表页面
    通知和代理
    UI基础--UITableView实现仿QQ聊天页面
    UI基础--UITableView实现仿微博页面
    UI基础--UITableView,UITableViewDataSource,UITableViewDelegate的一些属性和方法
    UI基础--使用UIScrollView、UIPageControl、NSTimer实现图片循环播放
    UI基础--UIScrollView和UIScrollViewDelegate
    NSURLSession 简介
    Core Animation
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15595837.html
Copyright © 2011-2022 走看看