JS高级. 02 面向对象创建对象构造函数自定义构造函数原型

Posted 明明明明明明明明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS高级. 02 面向对象创建对象构造函数自定义构造函数原型相关的知识,希望对你有一定的参考价值。

面向对象的三大特性:

  

  1. 封装

    a)  把一些属性和方法装到一个对象里

   2.  继承

    a)  js中的继承是指:

    1.      一个对象没有一些方法和属性,而另一个对象有
    2.     把另一个个对象的属性和方法,拿过来自己用,这就是继承

    b)  混入式继承  for … in

       1.       父类的属性和方法在所有之类

  3.  多态

    a)  JS中没有相应的体现

    b)  在强类型语言比较常见

    c)  实用父类的变量接受子类的对象

    d)  父类的属性方法供所有的子类共享

创建对象的方式

1. 创建对象

  四种方法:

    1、字面量创建

      用一个创建一个,不能复用。会造成代码亢余,资源浪费

    2、内置构造函数创建对象

      1、内置构造函数创建对象

        1. var p = new Object();

        2.var arr = new Array();

        3. 创建出来的对象都是空对象,要手动添加属性,造成代码重复

    3、 封装简单的工厂函数(不推荐)

        

function    creatObj(name, age){
    var obj = {
            boj : name;
            obj: age;
            sayHello : function(){
                                    console.log(‘‘);
                            }        
            }
            return obj;
}

 

    4、 自定义构造函数

       

function Porple(data1,data2){
                this.xx = data;
        }

构造函数是干什么用的?

javascript中,构造函数是给对象添加属性,初始化属性用的。

对象的创建过程

var p = new Person();

以上面这个p对象创建为例:

  1. 首先使用new关键字创建对象,类似于使用{},这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点:

    • 使用new关键字创建的对象,对象的类型就是创建这个对象使用的构造函数的函数名
    • 使用{}创建对象,对象的类型一定是Object,相当于使用了new Object()
  2. 使用构造函数为其初始化成员

    • 在构造函数调用开始的时候,有一个赋值操作,也就是让this = 刚创建出来的对象
    • 在构造函数中,this就代表刚创建出来的对象
  3. 在构造函数中,利用对象的动态特性,为对象添加成员

 

自定义构造函数

function Porple(data1,data2){

  this.xx = data;

}

  1. 概念:用来实例化对象,并且给初始化对象赋值 
  2. 构造函数名首字母大写
  3. 构造函数一般和new关键字一起使用
  4. 构造函数返回值默认为新创建好的对象,如果手动设置返回值

a)  返回值类型如果不是Object类型的都还返回创建的对象

b)  如果是Object类型的就返回object

 

a)  对象字面量{},创建对象

b)  自定义构造函数,创建对象

  1. 构造函数也是函数,通常用来初始化对象
  2. new用来创建对象
  3. 构造函数用来初始化函数
  4. 构造函数名要大写,

c)  构造函数的执行过程

  1. 使用new关键字创建对象
  2. 调用构造函数把新创建出来的对象赋值给构造函数的this关键字
  3. 在构造函数内实用this为新创建出来的对象添加成员
  4. 默认返回新创建的这个对象
  5. 如果return一个空值,或者return一个基本类型数据仍旧是返回新创建的对象

a)  返回undefined和null都是返回新对象

  1. 如果return的是object类型,将返回return后面的对象
  2. 函数名加括号就是调用函数
  3. 不写括号是把函数整体代码赋值给另一个变量
  4. 如果调用函数的时候不给构造函数实参,构造函数不会创建新对象,里面的this将会指向window,添加的属性也会添加给window
  5. 如果构造函数没有参数,可以不写括号调用

对象成员:属性和方法

 

原型、

  • 每一个函数在定义的时候,都会有跟它关联的一个对象被创建出来
  • 每一个由构造函数创建出来的对象,都会默认的和构造函数的神秘对象关联
  • 当使用一个方法进行属性或者方法访问的时候,会先在当前对象内查找该属性和方法
  • 如果当前对象内未找到,就回去跟它关联的神秘对象内进行查找

 

  1. 访问构造函数的原型  

    a)  构造函数.prototype

  2.  构造函数.prototype.新属性 = 属性值

  3.  自己和原型中都有的属性,优先用自己的

  3.  创建一个对象叫做实例化对象

    a)  通过构造函数创建对象创建对象的过程

  4.  实例

    a)  通过构造函数实例化出来的对象就是该构造函数的一个实例

  5.  原型的实用方法:

    a)  利用对象的动态特性给原型对象添加属性

  6.  直接替换原型对象

    Porple.prototype = {

         name : ‘Jack’,

    }

    a)  直接替换原型对象出现的问题

    1. 在替换原型之前创建的对象的原型  和在替换原型之后创建的对象的原型 不是同一个
    2. 替换不是修改

    b)  点语法进行属性赋值的时候,不会去原型查找

    c)  使用点语法赋值的时候,如果对象中不存在该属性,就会对该对象新增属性,不会去原型中查找

    d)  如果原型总分的属性是引用类型的属性,那么所有的对象共享该属性,并且一个对象修改了该引用

      类型中的成员,所有对象都会被修改

    e)  一般不会把属性放置到原型中

  7.  通过构造函数访问原型

    a)  构造函数.prototype

  8.  通过对象访问原型

    a)  对象.__proto__          //不推荐使用

  9.  constructor:原型对象的属性

 





以上是关于JS高级. 02 面向对象创建对象构造函数自定义构造函数原型的主要内容,如果未能解决你的问题,请参考以下文章

JS面向对象——构造函数模型

JS面向对象设计-理解对象

JS高级学习路线——面向对象进阶

js之面向对象

JavaScript高级 面向对象(13)--构造函数的执行过程

JavaScript高级 对象创建模式 object 对象字面量 工厂模式 自定义构造函数 构造函数+原型