js中原型和原型链
1.原型: 在JavaScript 中,对象被表现为prototype 。
原型其实一直存在于我们接触过的任何一个对象。
2.
Tip:在函数对象中也存在__proto__属性,但是查看函数对象的原型还是要使用prototype 。
JavaScript 在创建对象的时候,无论是普通对象还是函数对象,都存在一个属性__proto__,
JavaScript 的原型链 和继承主要依赖于__proto__
我们可以通过__proto__ 和 prototype的结合 查看原型的每一个层级,也就是原型链。
Tip:在js中,原型和原型链是实现继承的一种模型。
X.a();
当我们调用一个对象的属性或者方法的时候,系统会查询这个对象,如果这个对象中不存在这个方法,就会向上一层查询,如果上一层还是没有这个属性或者方法,就继续沿着原型链去找,一直找到原型的最顶端,object 的上一层 null才会停止。
3.简单的继承
var a = {
x : 1,
y : 2
}
var b = {
z : 3,
w : 4
}
b.__proto__ = a;//b的原型是a,b继承a
console.log(b);
console.log(b.x);
4.create创建对象的一种方式
var a = Object.create({x:1});
console.log(a.__proto__);//{x:1}
var b = Object.create(null);
console.log(b);//Object No Properties
var e = "hello";
console.log(e.__proto__);//String {length: 0, [[PrimitiveValue]]: ""}
var dd = Object.create(Object.prototype);
console.log(dd);
console.log(dd.__proto__);
5.constructor 属性返回对创建此对象的数组函数的引用。
var a = 10;
console.log(a.constructor);//function Number
var b = "hello";
console.log(b.constructor);//function String
6.继承
/*
需求:让我们新创建对象a 能够同时拥有 Show对象和 SHow对象原型的方法和属性。
TIp:需要明白:js的原型是可以更改的。
实现思路: 我们要通过更改原型的方式来实现继承。
Why? 因为js中的机制是:对象会从原型无条件的继承属性和方法。
我们才去将a对象的原型重新赋值为实例化后的show对象。
*/
function Show(){
this.getName = function (name){
alert(name);//爸爸
}
}
Show.prototype.getAge = function (age){
alert(age);//爷爷
}
// console.log(Show);
// console.log(Show.prototype);
var a = {};//干儿子 object function Obejct
a.__proto__ = new Show();//如果采用这种方式去实现继承的话,会发现,
//a原型的构造函数和本身的构造函数被破坏了,那么这种情况是不利用开发的
//容易出现不可预知的错误,所以,我们在下一步,要将a原型的构造函数改为a本身也就是obejct。
// console.log(a.constructor);
a.__proto__.constructor = a;
// a.getName('dav');
// a.getAge(10);
console.log(a);
console.log(a.__proto__);
console.log(a.__proto__.constructor);
// a.__proto__ = Show.prototype;
// a.getAge(2);
// a.getName('dav');
7.继承
/*
m 对象 n对象 k对象
需要k对象拥有m对象和 n对象的属性和方法
*/
function m ()
{
this.showM = function (){
alert('this is M')
}
}
function n()
{
this.showN = function (){
alert('this is N');
}
}
function k()
{
}
n.prototype = new m();
n.prototype.constructor = n;
k.prototype = new n();
k.prototype.constructor = k;
var boo = new k();
boo.showM();
boo.showN();
8.跳过继承过来的属性或方法
var a = {
x:1,
y:2
}
var b ={
a :3,
c:4
}
b.__proto__ = a;
console.log(b);
for(var i in b)
{
if(!b.hasOwnProperty(i)){//能够将继承过来的属性或者方法跳过,不去遍历出来
continue;
}
else
{
document.write(b[i] + '<br/>')
}
}
js中原型和原型链的更多相关文章
- 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解
一:原型和原型对象: 1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址. 2.函数的原型对象__proto__:所有对象都有__ ...
- JavaScript中原型和原型链
原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: ...
- JS中注意原型链的“指向”
昨天压缩Js文件时发现了项目中的一个prototype的问题代码如下所示: 1. <script> var XXX = function(){ }; var x1 = new XXX(); ...
- JS 一条原型链扯到底
在正文之前,首先要知道两点, 1.__proto__是每个js 对象的内置属性,而prototype 是函数的内置属性,也是一个对象. 2.所谓原型,指的就是每个函数对象的prototype属性. f ...
- js继承之原型链继承
面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...
- JS对象、原型链
忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...
- JS面向对象之原型链
对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...
- 深入理解JS对象和原型链
函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...
- JS中的原型链和原型的认识
这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很 ...
随机推荐
- 【cocos2d-x 3.7 飞机大战】 决战南海I (三) 敌机实现
如今来实现敌机类 敌机和我方飞机相似,具有生命值.能够发射子弹.而且有自己的运动轨迹.事实上能够为它们设计一个共同的基类,这样能够更方便扩展. 不同的敌机,应设置不同的标识.属性 // 敌机生命值 c ...
- CSS (二)解析CSS盒子
话说.一写博客还有些莫名的兴奋感-- 这几天一直挤时间忙于赶牛腩视频,迟到的CSS盒子.请谅解. CSS盒子,一開始听起来还有点高大上的赶脚. 后来了解之后,发现事实上非常easy理解.从功能上讲非常 ...
- Android内存泄露之开篇
先来想这三个问题 内存泄露是怎么回事 内存会泄露的原因 避免内存泄露 1.内存泄露怎么回事 一个程序中,已经不须要使用某个对象,可是由于仍然有引用指向它垃圾回收器就无法回收它,当然该对象占用的内存就无 ...
- kvc VS kvo
Kvo是Cocoa的一个重要机制,它主要是用于对一个属性的新旧值的监控. 例如说依据A(数 据类)的某个属性值变化,B(view类)中的某个属性做出对应变化.对于MVC,kvo应用的地方很广泛. 使用 ...
- 【MySQL】Win7下修改MySQL5.5默认编码格式
一般安装MySQL程序过程中,有一步骤是选择MySQL的默认编码格式的,程序默认为Latin1编码格式,当然也可以选择第三个选项,手动选择gbk或utf8编码格式,以支持中文数据.如下图: 现在问题出 ...
- 使用带粒子效果的 CAEmitterLayer
1.用CAEmitterLayer产生粒子效果 2.封装CAEmitterLayer 3.封装下雪.下雨的粒子效果控件 一.用CAEmitterLayer产生粒子效果 - (void)emitterL ...
- C# 实现WEBSOCKET聊天应用示例
C# 实现WEBSOCKET聊天应用示例 http://blog.163.com/da7_1@126/blog/static/10407267820121016103055506/ 2012-11-1 ...
- php(cli模式)执行文件传递参数
php -f index.php hello test 2314 shell命令执行php文件不像http那样通过GET方式传参 同样php文件获取的时候也不能用$_GET方法了 而是通过$argv[ ...
- 图像处理之基础---彩色转灰度算法优化rgb to yuv
File: StudyRGB2Gray.txtName: 彩色转灰度算法彻底学习Author: zyl910Version: V1.0Updata: 2006-5- ...
- 图像处理之基础---滤波器之高斯低通滤波器的高斯模板生成c实现
()代码实现 对原图进行高斯平滑,去除图像中的计算噪声void Bmp::MakeGauss(double sigma,double **pdKernel,int *pnWindowSize){ // ...