JS中原型模式与构造模式

最新推荐文章于 2022-02-09 19:29:51 发布

zu_ge

最新推荐文章于 2022-02-09 19:29:51 发布

阅读量170

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zu_ge/article/details/52438010

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前几天在JS书中看到这两个概念觉得非常模糊，百度积累一下这方面的信息

构造函数模型

function Blog(name, url) {
    this.name = name;
    this.url = url;
    this.alertUrl = function() {
        alert(this.url);
    }
}

var blog = new Blog('wuyuchang', 'http://www.jb51.net/');
console.log(blog instanceof Blog);  // true， 判断blog是否是Blog的实例

特点：对象的属性均不同，而对象的方法是相同，（重复编写方法浪费空间）

原型模式

function Blog() {
}

Blog.prototype.name = 'wuyuchang';
Blog.prototype.url = 'http://tools.jb51.net/';
Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];
Blog.prototype.alertInfo = function() {
    alert(this.name + this.url + this.friend );
}

// 以下为测试代码
var blog = new Blog(),
        blog2 = new Blog();
blog.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4
blog2.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4