JavaScript自学(4)

1、JSON对象

2、面向对象原型继承

<script>
    // var user={
    //     "name":"蔡伟",
    //     "age":3,
    //     "sex":"男"
    // };
    // //对象转化为json字符串 {"name":"蔡伟","age":3,"sex":"男"}
    // var jsonUser=JSON.stringify(user);

    //json字符串转化为对象 参数为json字符串
    // var obj=JSON.parse('{"name":"蔡伟","age":3,"sex":"男"}')

    var Student={
        name:"cj",
        age:3,
        run:function (){
            console.log(this.name+"run...");
        }
    };

    var xiaoming={
        name:"小明"
    };
    //小明的原型是Student
    //原型对象。
    xiaoming.__proto__=Student;

    var Bird={
        fly:function (){
            console.log(this.name+"fly...");
        }
    }
    xiaoming.__proto__=Bird;
</script>

3、面向对象class继承

本质：查看对象原型

原型链

proto：

<script>
    //ES6之后
    //定义一个学生类
    class Student{

        constructor(name) {
            this.name=name;
        }

        hello(){
            alert("Hello");
        }
    }

    class pupil extends Student{
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }

        myGrade(){
            alert("我是一名小学生！");
        }
    }
    var xiaoming=new Student("xiaoming");
    var caiwei=new pupil("蔡伟",1)
</script>

4、操作BOM对象

5、获得DOM节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    let h1 = document.getElementsByTagName("h1");
    let p1 = document.getElementById("p1");
    let p2 = document.getElementsByClassName("p2");

    let father = document.getElementById("father");
    let childrens = father.children;
    // father.firstChild;
    // father.lastChild;

</script>