原生JS 对象 包装类 原形 原型链

对象

用已学的知识点，描述一下你心目中的对象

var mrDeng = {		
    name : "mrDeng",
    age : 40,
    sex : "male",
    health : 100,//可在控制台更改
    smoke : function () {
        console.log('I am smoking');
        mrDeng.health --;
    },
    drink : function () {
        console.log('I am drink');
        mrDeng.health ++;
    }
}

改进 第一人称：this

var mrDeng = {		
    name : "mrDeng",   千万别是等于号
    age : 40,
    sex : "male",
    health : 100,//可在控制台更改
    smoke : function () {
        console.log('I am smoking');
        this.health --;
    },
        drink : function () {
            console.log('I am drink');
            this.health ++;
        }
}

1.属性的增、删、改、查

增

drink:function(){
    console.log('I am drinking');
    this.health ++;
}
meDeng.wife = "xiaowang";
// console.log(mrDeng.wife = "xiaoliu");
// console.log(mrDeng);

改

console.log(mrDeng);
console.log(mrDeng.sex = "male");
console.log(mrDeng.sex);

删 delete + 属性

当一个变量没有声明就是用报错，对象的属性没有就访问打印undefined，不会报错

var deng = {
    prepareWife : "xiaowang",
    name : "laodeng",
    sex : "male",
    gf : "xiaoliu",
    wife : "",
    divorce : function () {
        delete this.wife;
        this.gf = this.PrepareWife;

    },
    getMarried : function () {
        this.wife = this.gf;

    },
    changePrepareWife : function (someone){
        this.PrepareWife = someone;
    }
}

2.对象的创建方法

1.var obj = {} 叫plainObject 对象字面量/对象直接量

2.构造函数

（1） 系统自带的构造函数 new Object

var obj = new Object();
obj.name = 'abc';
obj.sex = 'female';
obj.say = function(){
}
var obj = {
    name : ""
}

系统提供的：new Object();Array();Number();Boolean();Date();

（2） 自定义

function Car(){//方便使用-人为的，构造函数特点：大驼峰式命名规则，只要是单词，首字母大写（小驼峰式：第一个外的首字母大写）
    this.name = "BMW";
    this.height = "1400";
    this.lang = "4900";
    this.weight = 1000;
    this.health = 100;
    this.run = function (){
        this.health --;
    }
}
var car = new Car();//每个都一样，但是每个都独立
var car1 = new Car();//不是一个人，不互通
console.log(car.run());
console.log(car1.health);
console.log(car.health);

demo

实现自己选配颜色

function Car(color){
    this.color = color;
    this.name = "BMW";
    this.height = "1400";
    this.lang = "4900";
    this.weight = 1000;
    this.health = 100;
    this.run = function (){
        this.health --;
    }
}
var car = new Car('red');
var car1 = new Car('green');
console.log(car/car1);

function Student(name,age,sex) {    this.name = name;    this.age = age;    this.sex = sex;    this.grade = 2017;}var student = new Student('zhangsan',18,'male');

注意事项

var obj = new Object(){    obj.name = 'abc';    obj.sex = 'female';    obj.say = function(){    }}

var obj = {    name : ""//冒号}

构造函数内部原理

有new 则发生三步

1.在函数体最前面隐式的加上var this = {}
2.执行 this.xxx = xxx;
3.隐式的返回this

function Student(name,age,sex) {    //var this = {    // name : ""    // age :     // };    this.name = name;    this.age = age;    this.sex = sex;    this.grade = 2017;    // return this;}var student = new Student('zhangsan',18,'male');

function Person(name, height){    // var this = {}    this.name = name;    this.height = height;    this.say = function (){        console.log(this.say);    }    // return this;}console.log(new Person('xiaoliu',180).name);

模拟构造函数

function Person(name, height){    var that = {};    that.name = name;    that.height = height;    return that;}var person = new Person('xiaowang', 180);var person1 = new Person('xiaozhang',175);

冷门知识

function Person(name, height){    var this = {};    this.name = name;    this.height = height;    this.say = function	(){        console.log(this.say);    }    return {};//显示返回空对象,so person很person1都返回空对象    // return this;}var person = new Person('xiaowang', 180);var person1 = new Person('xiaozhang',175);// 但是return一个原始值不允许

Object.create(原型)方法

包装类

1.小知识

原始值不能有属性和方法，只有对象能有，对象包括对象自己，数组，function。
数字不一定是原始值。数字分两种：原始值数字才是原始值。数字，字符串分为两种。
var num = 123;数字
Var num = new number(123);也数字，对象123

console.log(num);console.log(num.abc='a');console.log(num.abc);console.log(num);console.log(num*2);//成了数字，没有了对象属性，同理字符串，布尔

不能有属性的两个原始值：undefined null

String();
Boolean();
Number();

var num = new Number(123);var str = new String('abcd');var bol = new Boolean('true');// undefined与null不可以有属性console.log(num.abc);

2.现象：

var str = “abcd”;str.length = 4;//理论上不可以str.abc = ‘a’;str.abc = undefined;

原始值不可能有属性和方法，因为经历了一个过程——包装类，才能调用

var num = 4;//包装类console.log(num.len = 3);//new Number(4).len = 3;  delete// new Number(4).lenconsole.len(num.len);//undefined// num没有length

考题

基于一个理论：数组截断

var arr = [a,b,c,d];console.log(arr.length = 2);console.log(arr);

成哥真题

var str = "abcd";str.length = 2;// new String('abcd').length = 2;deleteconsole.log(str);//abcd

变式

var str = "abcd";str.length = 2;// new String('abcd').length = 2;delete// new String('abcd').lengthconsole.log(str.length);//4

原形

1.定义

原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。

构造函数产生的对象：

// Person.prototype = {} 是祖先	Person.prototype.name = "hehe";function Person() {}var person = new Person();

应用：

实例一：自己有取自己的

Person.prototype.LastName = "Deng";Person.prototype.say  = function(){    console.log('hehe');}function Person() {    // this.LastName = 'ji';先看自己后看父亲}var person = new Person();var person1 = new Person();

实例二：

Person.prototype.LastName = "Deng";Person.prototype.say  = function(){    console.log('hehe');}function Person(name,age,sex) {    this.name = name;    this.age = age;    this.sex = sex;}var person = new Person('xuming',30,'male');

2.提取共有属性。

function Car(color,owner) {    this.owner = owner;    this.carName = "BMW";//每次生产都得执行这三句，耦合    this.height = 1400;    this.lang = 8900;    this.color = color;}var car = new Car('red','prof.ji');

优化

Car.prototype.height = 1400;Car.prototype.lang = 8900;Car.prototype.carName = "BMW";function Car(color,owner) {    this.owner = owner;    this.color = color;}var car = new Car('red','prof.ji');var car1 = new Car('green','laodeng');

3.原形的增删改查

增

Person.prototype.lastName = "Deng";//原形属性没有改，想改，就要调用Person.prototyoe.lastNamefunction Person(name) {    this.name = name;}var person = new Person('xuming');

console.log(person.lastName="james");//这不叫修改，这叫增加console.log(person);console.log(person.lastName);

删

console.log(delete person.name);console.log(person.name);console.log(delete person.lastName);console.log(person.lastName);//删除失效

优化

Car.prototype.height = 1400;Car.prototype.lang = 8900;Car.prototype.carName = "BMW";一步到位Car.prototype = {    height : 1400,    lang : 4900,    carName : "BMW"}

改

2.对象如何查看对象的构造函数 — > constructor构造器

function Person(){}//可以手动更改//构造器constructor：谁生的Car.prototype = {    constructor : Person}function Car(){}var car = new Car();console.log(car.constructor);

查

1. 对象如何查看原型 — > 隐式属性 proto

function Person(){
   }var person = new Person();//浅紫色，隐式命名规则console.log(person);

person.prototype.name = 'abc';function Person(){}var person = new Person();// 私人属性：var __praviteconsole.log(person.__proto__)//__proto__里面放的是原形

Person.prototype.name = 'abc';function Person(){    var this = {        // __proto__: Person.prototype    }}//先看看自己有没有name属性，没有的话沿着proto指向找var perosn = new Person();console.log(perosn.name);

改变proto指向会使得指向更改

Person.prototype.name = 'abc';function Person() {    // var this = {    // 	// __proto__: Person.prototype    // }}var obj = {    name: "sunny"}var person = new Person();//换爹person.__proto__ = obj;

演示1

Person.prototype.name = "sunny";function Person() {}var person = new Person();Person.prototype.name = "cherry";person.name; 分析:自己没有，找proto，是Person.prototype：sunny，最后又改成cherry

演示2

Person.prototype.name = "sunny";function Person() {}Person.prototype.name = "cherry";var person = new Person();console.log(person.name); 同理分析cherry

演示3

Person.prototype.name = "sunny";function Person() {}var person = new Person();Person.prototype = {    name : "cherry"}person.name; 答案：sunny。        .的写法是原有的基础上把原有的值改了，这一次是把原形改了，换了个新对象

简化:引用值的互相赋值

var obj = {name : "a"};var obj1 = obj;obj = {name : "b"};obj1:a,obj:b     

Person.Prototype.name = "sunny";function Person() {    //var this = {__proto__:Person.prototype}}//proto指向不变还是sunnyvar person  = new Person();Person.prototype = {//把自己空间换了    name:'cherry'}// 更加简化// Perosn.prototype = {name:"a"};// __proto__ = Person.Prototype;// Person.Prototype = {name:"b"};

演示4

Person.prototype.name = "sunny";function Person() {}Person.p