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中原型和原型链的更多相关文章

  1. 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

    一:原型和原型对象: 1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址. 2.函数的原型对象__proto__:所有对象都有__ ...

  2. JavaScript中原型和原型链

    原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: ...

  3. JS中注意原型链的“指向”

    昨天压缩Js文件时发现了项目中的一个prototype的问题代码如下所示: 1. <script> var XXX = function(){ }; var x1 = new XXX(); ...

  4. JS 一条原型链扯到底

    在正文之前,首先要知道两点, 1.__proto__是每个js 对象的内置属性,而prototype 是函数的内置属性,也是一个对象. 2.所谓原型,指的就是每个函数对象的prototype属性. f ...

  5. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  6. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  7. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  8. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  9. JS中的原型链和原型的认识

    这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很 ...

随机推荐

  1. 【cocos2d-x 3.7 飞机大战】 决战南海I (三) 敌机实现

    如今来实现敌机类 敌机和我方飞机相似,具有生命值.能够发射子弹.而且有自己的运动轨迹.事实上能够为它们设计一个共同的基类,这样能够更方便扩展. 不同的敌机,应设置不同的标识.属性 // 敌机生命值 c ...

  2. CSS (二)解析CSS盒子

    话说.一写博客还有些莫名的兴奋感-- 这几天一直挤时间忙于赶牛腩视频,迟到的CSS盒子.请谅解. CSS盒子,一開始听起来还有点高大上的赶脚. 后来了解之后,发现事实上非常easy理解.从功能上讲非常 ...

  3. Android内存泄露之开篇

    先来想这三个问题 内存泄露是怎么回事 内存会泄露的原因 避免内存泄露 1.内存泄露怎么回事 一个程序中,已经不须要使用某个对象,可是由于仍然有引用指向它垃圾回收器就无法回收它,当然该对象占用的内存就无 ...

  4. kvc VS kvo

    Kvo是Cocoa的一个重要机制,它主要是用于对一个属性的新旧值的监控. 例如说依据A(数 据类)的某个属性值变化,B(view类)中的某个属性做出对应变化.对于MVC,kvo应用的地方很广泛. 使用 ...

  5. 【MySQL】Win7下修改MySQL5.5默认编码格式

    一般安装MySQL程序过程中,有一步骤是选择MySQL的默认编码格式的,程序默认为Latin1编码格式,当然也可以选择第三个选项,手动选择gbk或utf8编码格式,以支持中文数据.如下图: 现在问题出 ...

  6. 使用带粒子效果的 CAEmitterLayer

    1.用CAEmitterLayer产生粒子效果 2.封装CAEmitterLayer 3.封装下雪.下雨的粒子效果控件 一.用CAEmitterLayer产生粒子效果 - (void)emitterL ...

  7. C# 实现WEBSOCKET聊天应用示例

    C# 实现WEBSOCKET聊天应用示例 http://blog.163.com/da7_1@126/blog/static/10407267820121016103055506/ 2012-11-1 ...

  8. php(cli模式)执行文件传递参数

    php -f index.php hello test 2314 shell命令执行php文件不像http那样通过GET方式传参 同样php文件获取的时候也不能用$_GET方法了 而是通过$argv[ ...

  9. 图像处理之基础---彩色转灰度算法优化rgb to yuv

    File:      StudyRGB2Gray.txtName:      彩色转灰度算法彻底学习Author:    zyl910Version:   V1.0Updata:    2006-5- ...

  10. 图像处理之基础---滤波器之高斯低通滤波器的高斯模板生成c实现

    ()代码实现 对原图进行高斯平滑,去除图像中的计算噪声void Bmp::MakeGauss(double sigma,double **pdKernel,int *pnWindowSize){ // ...