smm临时笔记

• smm的笔记：
  • 构造函数和原型对象和 实例对象之间的关系

function F(){
        document.write(F.prototype.constructor===F)
    }
    f()// true

    // 构造函数function（.prototype）-> 原型对象(.constructor)->构造函数
    // 构造函数(new)-> 实例object （.__proto__）-> 原型对象(.constructor)->构造函数

构造函数和原型对象和 实例对象之间的关系

• proto属性是一个内部属性， 应该尽量少用，而是用Object.getPrototypeof和Object.setPrototypeOf，进行原型对象的读写操作。

  • 实例的 _proto_ ----> 构造函数的原型对象 ----> Object的原型对象 ----> null

图片.png

• 原型链

  
  原型链分析图

    function F1(){
        this.name = "nameF1";
    }
    F1.prototype.getf1name = function(){
        return this.name;
    }
    function F2() {
        this.name = "nameF2";
    }
    F2.prototype = new F1();
    F2.prototype.getf2name = function(){
        return this.name;
    }
    F2.prototype.getf1name = function(){
        return "newname";
    }

    var f2instance = new F2();
    document.write(f2instance.getf1name());// newname; 重新定义继承自祖辈的方法， 会覆盖原方法

    var f1instance = new F1();
    document.write(f1instance.getf1name()); //nameF1;重新定义继承自祖辈的方法,不会改变祖辈自己的调用

• 通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做就会重写原型链；

• 原型链的问题1：.引用类型值的原型属性会被所有实例共享;

    function F1(){
        this.colors = ["red", "blue", "green"];
    }
    function F2(){}
    F2.prototype = new F1();
    var instance1 = new F2();
    instance1.colors.push("black");
    document.write(instance1.colors); //"red,blue,green,black"
    var instance2 = new F2();
    document.write(instance2.colors); //"red,blue,green,black"

• 解决办法：借用构造函数；

    function F1(){
        this.colors = ["red", "blue", "green"];
    }
    function F2(){
        F1.call(this);
    }
    var instance1 = new F2();
    instance1.colors.push("black");
    document.write(instance1.colors); //"red,blue,green,black"
    var instance2 = new F2();
    document.write(instance2.colors); //"red,blue,green"

• 原型链的问题2:创建子类型的实例时，不能向超类型的构造函数中传递参数。
• 组合继承：最常用的继承方式
  p186 10-16
• 原型式继承：Object.create(o， [描述符])， 传入一个要copy的类型， 返回一个指向这个类型的其它类型的实例， 描述符同Object.defineProperties()的第二个参数。
  -缺点：同原型继承， 共享引用类型值

    var person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = Object.create(person, {
        name: {
            value: "Greg"
        }
    });
    alert(anotherPerson.name); //"Greg"

• 寄生式继承

    function createAnother(original){
        var clone = object(original); //通过调用函数创建一个新对象
        clone.sayHi = function(){ //以某种方式来增强这个对象
            alert("hi");
        };
        return clone; //返回这个对象
    }

• 寄生组合式继承(推荐)？？？？？

    function inheritPrototype(subType, superType){
        var prototype = Object.create(superType.prototype); //创建对象
        prototype.constructor = subType; //增强对象
        subType.prototype = prototype; //指定对象
    };


    function F1(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
    };
    F1.prototype.sayName = function(){
        alert(this.name);
    };
    function F2(name, age){
        F1.call(this, name);
        this.age = age;
    }
    inheritPrototype(F2, F1);
    F2.prototype.sayAge = function(){
        alert(this.age);
    };

    document.write(F2)

---

page 190/206/208

对于元素节点， nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。
每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象， 使用 Array.prototype.slice()方法可以将其转换为数组。
hasChildNodes()
appendChild()
insertBefore()
replaceChild()
removeChild()
cloneNode()

parentNode
childNodes
firstChild 和 lastChild
nextSibling 和 previousSibling
ownerDocument

• NamedNodeMap中保存的是一组无序的属性节点的集合。
• NodeList对象是由childNodes属性，querySelectorAll方法返回的一组节点的集合，它保存着一组有序的节点。注意区别的是，由childNodes属性返回的NodeList对象是一个动态的集合（live collection）， 而由querySelectorAll方法返回的则是一个静态的集合（static collection）。querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素.
  -HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。
  • HTMLCollection 对象是只读的，不能给它添加新元素，即使采用 JavaScript 数组语法也是如此。
  • HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引。

2. outerHTML 属性

• innerHTML:
  　　从对象的起始位置到终止位置的全部内容,不包括Html标签。
• outerHTML:
  　　除了包含innerHTML的全部内容外, 还包含对象标签本身。

  <div id="testinner">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div id="testouter">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>

    <script>
        div = document.getElementById("testinner")
        div.innerHTML = "<p>This is another paragraph.</p>";
        alert("this is inner>"+div.innerHTML)  // this is inner><p>This is another paragraph.</p>

        div = document.getElementById("testouter")
        div.outerHTML = "<p>This is another paragraph.</p>";
        alert("this is outer>"+div.outerHTML)

        // this is outer><div id="testouter">
        // <p>This is a <strong>paragraph</strong> with a list following it.</p>
        // <ul>
        // <li>Item 1</li>
        // <li>Item 2</li>
        // <li>Item 3</li>
        // </ul>
        // </div>
    </script>

• 虽然元素将在文档中被替换，但其outerHTML属性已设置的变量仍将保留对原始元素的引用：

        //     <div id="container"><div id="d">This is a div.</div></div>
        container = document.getElementById("container");
        d = document.getElementById("d");
        alert(container.firstChild.nodeName); // logs "DIV"

        d.outerHTML = "<p>This paragraph replaced the original div.</p>";
        alert(container.firstChild.nodeName); // logs "P"
        alert(d.nodeName); // logs "P"

• 如果元素没有父元素，则设置其outerHTML属性不会更改它或其后代。许多浏览器也会抛出异常

var div = document.createElement("div");
div.outerHTML = "<div class=\"test\">test</div>";
console.log(div.outerHTML); // output: "<div></div>"

4. 内存与性能问题

• 每次循环都设置一次 innerHTML 的做法效率很低。而且，每次循环还要从 innerHTML 中读
  取一次信息，就意味着每次循环要访问两次 innerHTML。最好的做法是单独构建字符串，然后再一次
  性地将结果字符串赋值给 innerHTML

        myul = document.getElementById("myul")
        for (var i=0, len=5; i < len; i++){
            myul.innerHTML += "<li>" + i + "</li>"; //要避免这种频繁操作！！
        }

        var itemsHtml = "";
        for (var i=0, len=5; i < len; i++){
            itemsHtml += "<li>" + i + "</li>";
        }
        myul.innerHTML = itemsHtml;  //这个例子的效率要高得多，因为它只对 innerHTML 执行了一次赋值操作。