javascript——构造函数和原型

创建对象的三种方式

1.对象字面量

var obj={};

2.new Object()

var obj2=new Object();

3.自定义构造函数

function Obj3(name,age){
    this.name=name;
    this.age=age;
    this.fun=function(){
        console.log("---");
    }
}
var xm=new Obj3('xiaoming','12');

构造函数

构造函数是一种特殊的函数,主要用来初始化对象,与new一起使用

new在执行时会在内存中创建新的空对象。让this指向新对象。执行构造函数代码为对象添加属性和方法。返回新对象(不需要return)

构造函数浪费内存

静态成员和实例成员

实例成员

构造函数内部通过this添加的成员

实例成员只能用实例化对象来访问,不可以通过构造函数访问

静态成员

在构造函数本身上添加的成员

如:Obj3.sex=‘男’

静态成员只能通过构造函数访问,不能通过对象访问

  // 创建构造函数
        function Star(name, age) {
            // 实例成员
            this.name = name;
            this.age = age;
            this.sing = function() {
                console.log('我会唱歌');
            }
        }
        // 静态成员
        Star.sex = '男';
        // 实例化对象
        var xm = new Star('小明', 18);
        var xh = new Star('小红', 18);
        console.log('小明的年龄是:' + xm.age); //18
        console.log('小明的性别是:' + Star.sex); // 男
        console.log('小明的性别是:' + xm.sex); //undefined

原型

构造函数原型 prototype

构造函数通过原型分配的函数所有对象共享

js中,每一个构造函数都有一个prototype属性指向另一个对象,prototype就是一个对象(prototype对象)。这个对象所有的属性和方法都被构造函数拥有

可以把不变的方法直接定义在prototype对象上,让所有对象的实例共享方法

一般情况下,公共属性定义到构造函数中,公共方法放在原型对象中

 // 创建构造函数
        function Star(name, age) {
            this.name = name;
            this.age = age;
        }
        // 把方法定义在构造函数的prototype对象中
        Star.prototype.sing = function() {
                console.log('我会唱歌');
            }
            // 实例化对象
        var xm = new Star('小明', 18);
        var xh = new Star('小红', 18);
        console.dir(Star);
        xm.sing();
        xh.sing();

在这里插入图片描述

在这里插入图片描述

对象原型 __proto__

对象都有一个属性__proto__指向构造函数的prototype原型对象,这就是对象可以使用构造函数prototype原型对象的属性和方法的原因

在这里插入图片描述

__proto__与prototype是等价的

在这里插入图片描述

__proto__对象原型的意义是为对象的查找机制提供线路,但它不是一个标准属性,在实际开发时不能使用这个属性,只是内部指向原型对象prototype

constructor构造函数

对象原型(__porto__)和构造函数原型对象(prototype)里都有constructor属性

constructor称为构造函数,它指回构造函数本身

在这里插入图片描述

constructor主要用于记录该对象引用哪个构造函数,可以让原型对象重新指向原来的构造函数

如果修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动利用constructor指回原来的构造函数

在这里插入图片描述

在这里插入图片描述

构造函数、实例、原型对象之间的关系

在这里插入图片描述

原型链

在这里插入图片描述

js的成员查找机制

当访问一个对象的属性或方法时,首先查找对象本身有没有(优先)

没有就查找__porto__指向的prototype原型对象

还没有,则查找原型对象的原型(Object的原型对象)

一直找到Object为止(null)

即:按原型链查找

原型对象this指向

在构造函数中,里面的this指向的是对象实例

原型对象里的this指向的也是对象实例

扩展内置对象

通过原型对象。对原来的内置对象进行扩展自定义方法,如:

给数组增加自定义求和功能

在这里插入图片描述

  // 打印数组Array的内置对象
        console.log(Array.prototype);
        // 对数组Array的内置对象进行扩展求和额功能
        Array.prototype.sum = function() {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3, 4];
        console.log(arr.sum());
        // 打印数组Array的内置对象
        console.log(Array.prototype);

注意:数组和字符串内置对象不能给原型对象覆盖操作,即Array.prototype={}

只能是Array.prototype.xxx=function(){}

发布了18 篇原创文章 · 获赞 0 · 访问量 349
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览