当前位置: 首页 > wzjs >正文

网站建设前台功能设计与实现舆情系统

网站建设前台功能设计与实现,舆情系统,优秀品牌设计案例,用群晖建wordpress文章目录 原型原型链:实际应用面试题回答 原型 原型:每个函数都有prototype属性 称之为原型 因为这个属性的值是个对象,也称为原型对象 只有函数才有prototype属性 作用: 1.存放一些属性和方法 2.在Javascript中实现继承 const arr new Array(1, 2, 3, 4) con…

文章目录

  • 原型
  • 原型链:
  • 实际应用
  • 面试题回答

原型

原型:每个函数都有prototype属性 称之为原型

因为这个属性的值是个对象,也称为原型对象

只有函数才有prototype属性

作用:
1.存放一些属性和方法
2.在Javascript中实现继承

const arr = new Array(1, 2, 3, 4)
console.log(arr.reverse)

为什么创建好了就可以使用这些方法呢? 就是原型的存在

Array构造函数也是一个函数 , 只要是函数就有个原型 就是Array.prototype

打开mdn
在这里插入图片描述
在这个原型身上已经挂载了很多方法, 这些方法是可以给所有的数组实例去使用的

为什么实例可以去使用这些方法呢 , 是因为_porto_

每个对象都有_proto_属性

作用: 这个属性指向它的原型对象
在这里插入图片描述

原型链:

在这里插入图片描述

关系总结:

构造函数 -> prototype -> 构造函数的原型对象
构造函数的原型对象 -> proto -> Object.prototype
Object.prototype -> proto -> null(原型链的终点)
代码演示:

function Person(name, age) {this.name = name;this.age = age;
}const p = new Person("张三", 25);// p 的 __proto__ 指向 Person.prototype
console.log(p.__proto__ === Person.prototype); // true// Person.prototype 的 __proto__ 指向 Object.prototype
console.log(Person.prototype.__proto__ === Object.prototype); // true// Object.prototype 是原型链的终点
console.log(Object.prototype.__proto__); // null

解释:
Person.prototype.proto 确实指向 Object.prototype。
Object.prototype 没有更上层的原型,所以它的 proto 是 null。

所以,构造函数的原型对象最终的 proto 是指向 Object.prototype,而 Object.prototype 的 proto 是 null,这是原型链的终点。

实际应用

  1. 共享方法,减少内存开销
    在大型项目中,如果每个实例都独立创建相同的方法,会占用大量内存。原型可以让多个实例共享方法,从而提高性能。

示例:创建对象的优化

function User(name) {this.name = name;
}// 将方法放在 prototype 上,所有实例共享
User.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};let user1 = new User("Alice");
let user2 = new User("Bob");user1.sayHello(); // 输出: Hello, my name is Alice
user2.sayHello(); // 输出: Hello, my name is Bob

✅ 优点:所有 User 实例共享 sayHello 方法,而不是每次创建实例都生成新的方法,节省内存。

  1. 继承与扩展
    在项目中,多个对象可能有相似的行为,我们可以利用原型继承来减少代码重复,提高复用性。

示例:父类与子类继承

function Animal(name) {this.name = name;
}// 父类原型方法
Animal.prototype.speak = function() {console.log(this.name + " makes a sound");
};// 子类
function Dog(name, breed) {Animal.call(this, name); // 继承属性this.breed = breed;
}// 继承父类的方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;// 添加子类特有方法
Dog.prototype.bark = function() {console.log(this.name + " barks!");
};let dog1 = new Dog("Buddy", "Labrador");
dog1.speak(); // 输出: Buddy makes a sound
dog1.bark();  // 输出: Buddy barks!

✅ 优点:

Dog 继承了 Animal 的 speak 方法,无需重复定义。
Dog.prototype 还能额外扩展 bark 方法,增强灵活性。
3. 扩展原生对象
有时候我们需要扩展 JavaScript 自带的对象,比如 Array、String 等。

示例:扩展 Array.prototype

Array.prototype.sum = function() {return this.reduce((total, num) => total + num, 0);
};let numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // 输出: 15

✅ 优点:给所有数组对象增加 sum 方法,方便项目中复用。

⚠️ 注意:扩展原生对象可能会影响第三方库,应谨慎使用!

  1. 实现类的私有属性
    在 ES5 时代,我们可以通过原型和闭包结合,模拟私有变量,防止外部直接访问。

示例:使用闭包模拟私有属性

function Person(name) {let _age = 25; // 私有变量,外部无法直接访问this.name = name;this.getAge = function() {return _age;};
}let p1 = new Person("Alice");
console.log(p1.name);  // Alice
console.log(p1.getAge()); // 25
console.log(p1._age);  // undefined,无法直接访问

✅ 优点:保护 _age 变量不被外部随意修改,提高安全性。

  1. 结合原型模式和单例模式
    在实际开发中,我们可能希望某个对象只存在一个实例(比如配置管理、数据库连接池等)。可以结合原型模式和单例模式来实现。

示例:全局配置管理

const Config = (function() {function Config() {this.theme = "dark";this.language = "en";}let instance;Config.getInstance = function() {if (!instance) {instance = new Config();}return instance;};return Config;
})();let config1 = Config.getInstance();
let config2 = Config.getInstance();console.log(config1 === config2); // true,说明是同一个实例

✅ 优点:

只创建一个 Config 实例,避免重复初始化配置,提高效率。
总结

应用场景代码示例主要作用
方法共享User.prototype.sayHello让多个实例共享方法,节省内存
继承与扩展Dog.prototype = Object.create(Animal.prototype)复用父类方法,减少代码重复
扩展原生对象Array.prototype.sum添加全局通用方法,增强功能
私有属性let _age = 25;保护数据,防止外部修改
单例模式Config.getInstance()确保对象全局唯一

在实际项目中,合理运用原型能有效提高代码复用性、减少冗余,并优化性能! 🚀

面试题回答

  • 1.原型:函数都有prototype属性,称之为原型,也称为原型对象N原型可以放一些属性和方法,共享给实例对象使用
    原型可以做继承
  • 2.原型链:对象都有_proto 属性,这个属性指向它的原型对象,原型对象也是对象,也有_proto 属性,指向原型对象的原型对象,这样一层一层形成的链式结构称为原型链,最顶层找不到则返回 null
http://www.dtcms.com/wzjs/230635.html

相关文章:

  • 做gif动图的素材网站如何自己制作网站
  • 副食店年报在哪个网站做怎么推广自己的微信号
  • 网站字号多大网站建设策划书
  • wordpress个人主题影响关键词优化的因素
  • 企业的网站一般做哪些维护2024年阳性最新症状
  • 吉林省工程建设标准网站怎么做网站教程
  • 建设买卖网站要多少钱郑州seo推广
  • 网站风格主要包括哪些seo技术培训岳阳
  • 人工智能软件seo是什么服务器
  • 婚庆网站的设计意义百度快照怎么优化排名
  • 新网网站建设站长工具 seo综合查询
  • 使用redis做视频网站缓存淘宝客推广
  • 免费主页空间的网站pc网站优化排名软件
  • wordpress 菜单编辑seo攻略
  • 西安手机网站制作关键词优化排名的步骤
  • 福州外文网站建设漯河网络推广哪家好
  • 个人网站名称直通车推广
  • 网站不弄公安备案会怎么样aso优化推广公司
  • 东莞在哪里学网站建设网络营销策划模板
  • 济南网站优化推广东莞头条最新新闻
  • 叙述网站制作的流程网络推广外包怎么样
  • 沈阳网站制作定制厂家长沙靠谱的关键词优化
  • 为什么很多公司做网站建设seo外包
  • 网站源码使用数字营销软件
  • 网站备案怎么做黑龙seo网站优化
  • 中国菲律宾签证免签吗白云百度seo公司
  • 营销型网站窗口客服营销的主要目的有哪些
  • 从零学做网站郑州网络推广大包
  • wordpress搬家失败网站seo平台
  • 临安做企业网站的公司微信推广平台收费标准