• 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);    
    View Code

    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__);
    View Code

    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();
    View Code

    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/>')
                }
            }
    View Code
  • 相关阅读:
    2008 server 备份
    IBM公共文档库javascript
    javascript 删除节点
    鼠标onfocus或onblur效果
    jquery绿色版dreamweaver提示
    修复IE6下 25+ Bugs
    parentNode, removeChild, nextSibling, firstChild的练习
    近期技术讨论贴(持续更新:1210)
    png图片(有含有透明)在IE6中为什么不透明了
    浅谈javascript面向对象编程
  • 原文地址:https://www.cnblogs.com/gvip-cyl/p/6560182.html
Copyright © 2020-2023  润新知