JS面向对象——原型模型
以下通过一段示例代码，说明原型模型中的基本概念以及知识点。
<!DOCTYPE html>
<html>
<head>
<title>原型模型</title>
<script type="text/javascript">
function Person(){}; // Person.prototype.name="Lucy";
// Person.prototype.age=15;
// Person.prototype.sayName=function(){
// alert(this.name);
// }; //3.更简单的原型语法
Person.prototype={
constructor:Person,//若constructor属性值真的很重要，则需要手动设置回适当的值。
name:"Lucy",
age:15,
sayName:function(){
alert(this.name);
}
}; // var p1,p2;
p1=new Person();
p2=new Person();
//hasOwnProperty()检测一个属性存在于实例中（true）,还是存在于原型中（false）
alert(p1.hasOwnProperty("name"));//false
p1.name="Bob";
p1.job="student";//设置实例属性
alert(p1.name);//"Bob",来自实例
alert(p1.hasOwnProperty("name"));//true alert(p1.sayName==p2.sayName);//true 检查实例是否共享方法
alert(p1.job);
alert(p1.hasOwnProperty("age"));//false
alert(p1.hasOwnProperty("job"));//true // /*********************************** 2.原型与in操作符 *********************************************/ // /********单独使用in操作符********/
// 通过对象能够访访问到属性时，返回true
alert("job" in p1);//true
alert("age" in p1);//true
alert("name" in p1);//true
alert("name" in p2);//true //该函数确定属性是存在于原型对象中还是存在于实例对象中。 true：属性为原型对象属性；false：为实例对象属性。
function hasPrototypeProperty(object,name){
return !object.hasOwnProperty(name)&&(name in object);
}
alert(hasPrototypeProperty(p1,"job"));
alert(hasPrototypeProperty(p2,"name"));
// /******************************/ // /********for-in ***********/
// 返回的是所有能够通过对象访问的、可枚举的属性，其中包括存在于原型中的属性、也包括存在于实例中的属性。
// Object.keys(object):接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。
var keys=Object.keys(Person.prototype);
alert(keys);//"name,age,sayName"
var p1keys=Object.keys(p1);
alert(p1keys);//"name,job" //顺序即为for-in访问时的顺序
for(var prop in p1keys){
alert(p1keys[prop]);
} //Object.getOwnPropertyNames(object) 获取实例所有属性，包括不可枚举属性
var p1allkeys=Object.getOwnPropertyNames(p1);
alert(p1allkeys);//"name,job"
var p1allkeys=Object.getOwnPropertyNames(Person.prototype);
alert(p1allkeys);//constructor,name,age,job,sayName constructor属性为不可枚举
// /******************************/
// /*****************************************************************************************/ /************************************ 3.更简单的原型语法 ****************************************/
//设置为简单的原型语法后，Person.prototype设置为一个以对象字面量形式创建的新对象。最终结果相同，不过对象的constructor属性不再指向Person。
//若constructor属性值真的很重要，则需要手动设置回适当的值。
var friend=new Person();
alert(friend instanceof Object);//true
alert(friend instanceof Person);//true
alert(friend.constructor==Person);//false
alert(friend.constructor==Object);//true var keys2=Object.keys(Person.prototype);
alert(keys2);//constructor,name,age,job,sayName //简单原型语法中手动设置constructor属性之后，会导致它的[Enumerable]特性值为true，默认情况下原生的constructor值为false
//重设构造函数，只适用于ECMAScript5兼容浏览器
Object.defineProperty(Person.prototype,"constructor",{
enumerable:false,
value:Person
});
var keys3=Object.keys(Person.prototype);
alert(keys3);//name,age,job,sayName //
/**********************************************************************************************/ /************************************ 4.原型的动态性 ****************************************/
var per=new Person();
//可以随时为原型添加属性和方法，并且所有的修改能够立即在所有对象实例中反映出来。
Person.prototype.sayHi=function(){
alert("Hi!");
}
per.sayHi(); //若重构整个原型对象，就会在调用构造函数时为实例添加一个指向最初原型的[Prototype]指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。
//实例中的指针仅指向原型，而不是构造函数。
function Student(){};
var st=new Student();//先创建实例对象
Student.prototype={//重构原型对象原型
constructor:Student,
name:"Nike",
age:20,
speakEnglish:function(){
alert("Hello!");
}
};
st.speakEnglish();//error 0: Object doesn't support property or method 'speakEnglish'
// /**********************************************************************************************/ /************************************ 5.原型的问题 ****************************************/
//原型中所有属性是被很多实例共享的，这种共享对于函数非常适合。对于包含基本值得属性也没有什么，通过在实例上添加一个同名属性就可以隐藏原型中对应的属性。
//然而，对于包含引用类型的值来说，就会存在问题。如下例所示。
function Singer(){};
Singer.prototype={
constructor:Singer,
name:"Nike",
age:30,
albums:["Suger","Live"]//"Suger","Live"是所有实例对象的共享albums集合
};
var s1=new Singer();
var s2=new Singer();
s1.albums.push("Flowers");//“Flowers”是s1的唱片集
alert(s1.albums);//"Suger","Live","Flowers"
alert(s2.albums);//"Suger","Live","Flowers"，而"Flowers"不是s2的唱片
alert(s1.albums===s2.albums);//指向同一个albums
/**********************************************************************************************/
</script>
</head>
<body> </body>
</html>
部分摘自《JavaScript高级程序设计(第3版)》
JS面向对象——原型模型的更多相关文章
- js面向对象-原型链
var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...
- Js面向对象原型~构造函数
脑袋一团浆糊,但希望写点啥,所有就有了这篇博文了,抱歉哦....开始吧!!!! 什么是构造函数?? 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造 ...
- JS面向对象——工厂模型
工厂模型抽象了创建具体对象的过程,以下示例代码说明工厂类型: <!DOCTYPE html> <html> <head> <title>工厂模型< ...
- JS面向对象——动态原型模型、寄生构造模型
动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...
- JS面向对象——组合使用构造函数模型与原型模型
该模型为创建自定义类型最常用的方式. <!DOCTYPE html> <html> <head> <title>组合使用构造函数模型和原型模型</ ...
- JS面向对象——组合使用构造函数模型与原型模型中的隐患
组合使用构造函数模型和原型模型中的问题,使用对象字面量重写原型模型会有隐患(涉及到原型的动态性),如下例: <!DOCTYPE html> <html> <head> ...
- JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- 【JavaScript】 JS面向对象的模式与实践 （重点整治原型这个熊孩子 (/= _ =)/~┴┴ ）
参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript> —— KYLE SIMPSON 在JS的面向 ...
- js面向对象、创建对象的工厂模式、构造函数模式、原型链模式
JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...
随机推荐
- Linux 普通用户自动修改密码
在大量服务器运维中,维护服务器账号就让人头痛,对账号密码策略要求,现写了一个shell脚本来完成账号密码的修改,当然这个不是最好的方法,只是在没有其它辅助服务时使用,最好还是使用账户统一管理服务来维护 ...
- Rabbit MQ项目例子
地址链接: https://blog.csdn.net/cartoonmiao/article/details/51920766
- Vuex----核心概念和API
state 1)vuex管理状态的对象 2)它应该是唯一的 const state = { xxx:initValue } mutations 1)包含多个直接更新state的方法(回调函数)的对象 ...
- 简单的使用redis
心不慌手不抖我们跟着大哥走 https://blog.csdn.net/zhangcongyi420/article/details/82686702
- drf 的分页功能
1 settings中配置 page_size = 20 代表每页20条数据 REST_FRAMEWORK = { 'DEFAULT_PARSER_CLASSES': ( 'rest_framewor ...
- Dubbo学习-2-注册中心搭建
1.Dubbo支持如下几种注册中心,推荐使用zookeeper来作为注册中心. 2. 下载zookeeper https://zookeeper.apache.org/releases.html#do ...
- c# 如何更改 WebBrowser所加载的 HTML元素(隐藏滚动条)，并按照修改后的来呈现
如何更改 WebBrowser所加载的 HTML元素 方法1:在网页加载完毕后的事件里面添加代码,我这里只是修改网页不出现滚动条,因为滚动条我重写了. #region (private) 网页加载完成 ...
- JavaScript清空数组的三种方法
[文章系摘自网络,看到有用记录在博客,同时共享给大家] 原链接:http://www.2cto.com/kf/201409/335383.html 方式1,splice var ary = [1, ...
- 删除c++项目中的类
关闭引擎和vs 在工程目录中删除Source文件夹下相应的cpp和h文件 删除工程目录的saved 文件夹和intermediate文件夹 删除工程目录中binaries文件夹内的所有内容 右键工程文 ...
- centos7 安装gdal2.3.1
在直接源码安装gdal2.3时报错,大概意思是说没有安装SFCGAL. 1.centos更新cmake到3.5版本: wget https://cmake.org/files/v3.5/cmake-3 ...