通过一个轮播图插件来了解构造函数

简介: 例子:https://github.com/wayaha/rotateChart在ES5中,构造函数的使用可以说是很能体现面向对象的编程思想,有学过c的同学,可以很明显体会到面向过程和面向对象的区别,不多瞎扯,这次通过一个轮播图的插件来理解一下构造函数; 1、关于对象的创建方式  常见的创...

例子:https://github.com/wayaha/rotateChart

在ES5中,构造函数的使用可以说是很能体现面向对象的编程思想,有学过c的同学,可以很明显体会到面向过程和面向对象的区别,不多瞎扯,这次通过一个轮播图的插件来理解一下构造函数;


 

1、关于对象的创建方式

  常见的创建对象方式有:字面量和通过new + 构造函数的方式;

  字面量的方式相对灵活、简单;缺点也很明显,用一个需要造一个,不便于复用和属性的继承如下;

var person = {
    name: 'Picker',
    age: 18 ,
    doSomething: function (){
        console.log('I`m a developer, I can write code.');
     }
}

 

  

  另外通过new的方式创建,常用的获取时间通过new Date();当然自己可以定义构造函数,如下,这样可以创建一群这样的人。

function Person (name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.doSomething =function (){
    console.log('I`m a developer, I can write code.');
};
var me = new Person('Picker',18)

 

  用起来方便,但是在new的时候构造函数内部也做了一堆的操作:

var me={};
me.__proto__ = Person.prototype;
Person.call(me);
return me;

  a、创建一个对象;

  b、把空对象的原型对象指向构造函数的原型对象,此时空对象可以访问构造函数原型链上的方法和属性,这个很关键;

  c、通过call方法改变构造函数的this指向,并执行构造函数,此时的对象拥有了构造函数的属性和方法;

  d、返回对象me,即我们new出来的实例,构造函数默认有隐式返回,当构造函数有return时候,视情况而定,如果返回值是基础类型,构造函数忽略它的存在,继续返回默认值,如果是对象的形式,会返回该对象,代替生成的实例。

2、构造函数的创建

  a、构造函数默认使用大驼峰命名,首字母大写;

  b、构造函数的初始化,可以通过上面例子的方式,也可以是通过Object.defineProperty();

 

function Person( name){
    Object.defineProperty(this, "name"{
        get :function(){
           return name;
        },
         set:function (newName){
          name =newName;
        },
        enumerable :true,
         configurable:true //可配置
       });
 }  
var me=new Person('Picker');

 

  c、在构造函数中使用原型对象;

    doSomething方法就是原型对象的方法;如果需要挂载到原型上的对象更多,可以使用字面量的方式,如:

Person.prototype ={
      sayName :function(){
          console.log(this.name);
      },
    doSomething =function (){
        console.log('I`m a developer, I can write code.');
    };
 }

    使用字面量形式改写了原型对象改变了构造函数的属性,因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性。当一个函数被创建时,它的prototype属性也被创建,且该原型对象的constructor属性指向该构造函数。当使用对象字面量形式改写原型对象时,其constructor属性将被置为对象Object.为了避免这一点,需要在改写原型对象的时候手动重置constructor,如下:

Person.prototype ={
      constructor = Person,
      sayName :function(){
          console.log(this.name);
      },
    doSomething =function (){
       console.log('I`m a developer, I can write code.');
    };
 }

  d、另外,在构造函数中this指向问题

    箭头函数是不能用来创建构造函数的;

    构造函数中定义方法使用 function() {},不要使用箭头函数,箭头函数中的this会指向window,而不是构造函数或者实例;

    构造函数中关于事件绑定的函数,需要改变函数的this指向构造函数或者实例,如果需要的话;

 

目录
相关文章
|
1天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1069 0
|
10天前
|
人工智能 运维 安全
|
1天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
256 0
|
8天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
9天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。
|
9天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
747 23