js prototype 原型
//https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%B8%83%E7%A7%8D%E6%96%B9%E5%BC%8F/ 出处
function Person() { }
Person.prototype.name = 'jiang'; //为对象 添加属性和方法
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) //jiang
console.log(person2.name) // jiang // console.log(Object.getPrototypeOf(person1)); //输出指定对象原型
// console.log(Person.prototype); //输出原型 //function Person() {
//}
//var person1 = new Person();
//console.log(person1.proto === Person.prototype) // true 对象的proto属性 指向函数原型
//person1 instanceof Person // true instanceof操作符处理对象和函数之间的关系 //Person.prototype.isPrototypeOf(person1) // true 指向调用此方法的对象 返回true 调用通过原型添加的属性或方法
//Person.prototype.isPrototypeOf(person2) // true //Object.getPrototypeOf(person1) === Person.prototype // true // 获取对象原型 //function Person() {
//}
//Person.prototype.constructor === Person // true //这个属性其实就是将原型对象指向关联的构造函数 //function Person() {
//}
//var person1 = new Person()
//person1.constructor === Person // true //那岂不是实例person1也有.constructor属性,其实没有,通过原型链在原型Person.prtototype上面找到的 function Person() {
}
// 原型属性
Person.prototype.name = 'Jiang';
var person1 = new Person()
// 实例属性
person1.name = 'J';
console.log(person1.name) // J //如果在实例属性上没有找到的话,就会在实例的原型上去找,如果原型上还没有,就继续到原型的原型上去找,直到尽头 Object.prototype function Person() {
}
// 原型属性
Person.prototype.name = 'Jiang';
var person1 = new Person()
console.log(person1.name) // Jiang //上面代码中person1实例并没有name属性,但仍然可以输出值,就是在原型上找到的 function Person() {
}
var person1 = new Person()
// 实例属性
person1.name = 'j';
person1.hasOwnProperty('name') // true //使用方法hasOwnProperty,属性只有存在于实例中才会返回true function Person() {
}
Person.prototype.age = '100';
var person1 = new Person()
person1.name = 'j'; 'name' in person1 // true
'age' in person1 // true //前面提到hasOwnProperty方法可用于检测属性是否是实例属性,in则会遍历所有属性,不管是实例上的,还是原型上的 //in操作符有两种使用方式,单独使用和在for - in循环中使用, 先上基础代码
//fon-in, 会遍历所有能够通过对象访问的、可枚举的(enumerated)属性,不管是实例上,还是原型上
for (var prop in person1) {
console.log(prop) // name age
} //Object.keys() 此方法可以获取对象的所有可枚举的属性的名字
var keys = Object.keys(person1)
console.log(keys) // ["name"] var keys = Object.keys(Person.prototype)
console.log(keys) // ["age"] //原型对象Person.prototype的原型就是Object.prototype
<!--
为了理解原型链系统;我们要将javascript对象分为对象和函数两大类;
1.对象有__proto__属性; 函数有prototype属性;
{
创建空对象时,实际上我们是用Object函数来生成对象的
var o = {}; //有1个_pro属性
var o = Object(); //有1个_pro属性
o.__proto__ === Object.prototype; //true
var p = o.prototype; //未定义
var p1 = o.__proto__; //谷歌调试 包含13属性 使用函数来创建自定义的对象时
function MyObj() { }
var t = typeof MyObj; // 检测对象的类型为 "function"
var mo = new MyObj(); // 用函数创建对象 //该有1个_pro属性
var t = MyObj.prototype; //谷歌调试 包含2个属性constructor和__proto__;
var t1 = MyObj.__proto__; // 谷歌调试 只有 ƒ anonymous() 一般函数默认的prototype是一个对象;它有两个属性constructor和__proto__;
其中constructor属性指向这个函数自身,
__proto__属性指向Object.prototype;
Object函数的prototype属性里没有__proto__属性 }
-->
var y = function MyObj() { } //谷歌调试鼠标放在对象上,只有 ƒ MyObj()
y.fn = y.prototype = {
end:function(){}
}; //赋值后y.prototype 包含一个 __proto__
y.prototype = {
axd:function(){}
};
y.prototype["abcd"] =[];
//增加特殊符号属性
y.prototype[":"] =['1'];
//写法
构造函数模式
function Person(name, job) {
this.name = name
this.job = job
this.sayName = function() {
console.log(this.name)
}
}
var person1 = new Person(‘Jiang’, ‘student’)
var person2 = new Person(‘X’, ‘Doctor’)
原型模式
function Person() {
}
Person.prototype.name = ‘Jiang’
Person.prototype.job = ‘student’
Person.prototype.sayName = function() {
console.log(this.name)
}
var person1 = new Person()
原型 写法2
function Person() {
}
Person.prototype = {
name: ‘jiang’,
job: ‘student’,
sayName: function() {
console.log(this.name)
}
}
var person1 = new Person()
使用这种方式,完全重写了默认的Person.prototype对象,因此 .constructor也不会存在这里
更改原型
var SmartNode = function (option) {
this._init(option);
}
var t = SmartNode.prototype; //谷歌调试 包含2个属性constructor和__proto__; constructor 指向函数自身
SmartNode.prototype = {
_init:function (A){
alert(A);
this.r=A.r||10;
},
drawDashLine: function (B){}
}
var t1 = SmartNode.prototype; //谷歌调试 包含3个属性,drawDashLine 和_init 和__proto__; constructor找不到了 //prototype 原型
SmartNode.prototype={
AA:function(){}
};
var t2 = SmartNode.prototype; //谷歌 调试 包含2个属性, 一个是AA指向函数,和__proto__ 指向对象.
var smartNode = new SmartNode("123456789");
new 之后的对象 包括
- r: 10
- __proto__:
- drawDashLine: ƒ (B)
- _init: ƒ (A)
- __proto__: Object
js prototype 原型的更多相关文章
- 深入理解js——prototype原型
之前(深入理解js--一切皆是对象)中说道,函数也是一种对象.它也是属性的集合,你也可以对函数进行自定义属性.而JavaScript默认的给了函数一个属性--prototype(原型).每个函数都有一 ...
- JS原型,Prototype,原型
对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可 ...
- 关于JS对象原型prototype与继承,ES6的class和extends · kesheng's personal blog
传统方式:通过function关键字来定义一个对象类型 1234567891011 function People(name) { this.name = name}People.prototype. ...
- JScript中的prototype(原型)属性研究
今天看到同事使用js中的Prototype,感觉很是新鲜.由此想深入学习一下prototype(英['prəʊtətaɪp] 美['protə'taɪp]n. 原型:标准,模范),在学习prototy ...
- 关于js中原型链的理解
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...
- js的原型
在讲js的原型之前,必须先了解下Object和Function. Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是 ...
- JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)
通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法):造成了一定的资源浪费 function Obj(name,age){ this.name=name; ...
- 你不知道的JavaScript--Item15 prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- JavaScript prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
随机推荐
- python第十二周:SQL alchemy、pymysql
python操作MySQL mysqldb python3之后的版本就不支持mysqldb了,故在此略过 pymysql #执行SQL语句 # -*- coding:utf-8 -*- #!/user ...
- VMware虚拟机上安装CentOS 7
下载CentOS7,点击网址下载,地址:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1804.iso ...
- jquery怎样获取多个复选框的值?
jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element)); ...
- lunix下的redis数据库操作——hash(哈希)
哈希,形如:key : (field : value) 创建:(可以理解为users用户,name为xxx) hset users name xxx 查看: hget users name # &qu ...
- JavaSE 学习笔记之Java语法基础(二)
1,关键字:其实就是某种语言赋予了特殊含义的单词. 保留字:其实就是还没有赋予特殊含义,但是准备日后要使用过的单词. 2,标示符:其实就是在程序中自定义的名词.比如类名,变量名,函数名.包含 0-9. ...
- 洛谷—— P2690 接苹果
https://www.luogu.org/problem/show?pid=2690 题目背景 USACO 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为1和2), 每一棵 ...
- MVC地区多级联动扩展实现(非递归形式)
MVC前台界面调用方式如下: @Html.AreaDropDownList(, string.Empty) 参数说明: 第一个参数控件的名称: 第二个参数选中的地区编码: 第三个参数地区层级: 第四个 ...
- 使用OpenSSL做RSA签名验证 支付宝移动快捷支付 的server异步通知
因为业务须要.我们须要使用支付宝移动快捷支付做收款.支付宝给了我们<移动快捷支付应用集成接入包支付接口>见支付宝包<WS_SECURE_PAY_SDK>. 支付宝给的serve ...
- 【转】坑爹的AsyncTask之根本停不下来
原文网址:http://www.jianshu.com/p/0c6f4b6ed558 上篇<坑爹的AsyncTask之内存泄露>已经简单的探讨过线程使用不当会造成内存泄露的问题,在Acti ...
- Mybatis中resultMap的作用-解决实体类属性名和数据库字段不一致
解决实体类属性名和数据库字段不一致