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

简介: 例子: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月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
4月前
|
JavaScript
Vue中给对象添加新属性时,界面不刷新怎么办?
Vue中给对象添加新属性时,界面不刷新怎么办?
53 0
|
12天前
|
JavaScript 前端开发 索引
用四种方法实现轮播图
用四种方法实现轮播图
|
5月前
|
JavaScript 前端开发
【Vue】了解这些类和样式绑定就够了!
【Vue】了解这些类和样式绑定就够了!
|
7月前
|
前端开发 JavaScript
Vue3-类与样式绑定
Vue3-类与样式绑定
27 0
|
11月前
|
存储 JavaScript 前端开发
Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示
Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示
342 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义加载动画【027】
「HTML+CSS」--自定义加载动画【027】
107 0
「HTML+CSS」--自定义加载动画【027】
|
JavaScript
vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解)
vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解)
176 0
|
JavaScript 定位技术
Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式
Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式
390 0
Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式