从零开始 React Native (2) ES6面向对象编程

主要知识点:
模板字符串
箭头函数
解构赋值
Symbol 第七种数据类
class 关键字语法糖
继承 (原型继承原型继承的问题)(构造函数继承 )(组合继承)
下面都是代码样例看看能打印什么
/** * Created by liuml on 2017/4/7. */
//模板字符串
let name = "liu";
let age = 26;
let str = name + " is " + age + " year old.";

//嵌入变量 这里`` 是1左边的键
let str1 = `${name} is ${age} year old.`;

console.log(str);
console.log(str1);


//保持原来的字符串格式
let str2 = `I love
you`;
console.log(str2);

//箭头函数
let func = function (n) {
    console.log(n)
}
func(2);


//=>代表function
let func1 = n => console.log(n);
func1(1);


let func2 = function (n) {
    return n * 2;
}

//自动返回值

let func2 = n => n * 2;

console.log(func2(2));

//多个参数情况
let func3 = (a,b) => {
    a += 3;
    return a + b;
};

console.log(func3(3,4));


// 箭头函数返回对象
var initobj = id => ({id: id,name: "default"});
console.log(initobj(2));

//解构赋值
//拼接得到完整的名称
let full = ({first,last}) => first + "_" + last;

console.log(full({first: "begin",last: "end"}));

//map
var arr = [1,2,3,4].map(function (n) {
    return n * 2;
})

console.log(arr);

var arr = [1,4].map(n => n * 2);
console.log(arr);

//排序 升序
var arr = [1,4,5,2].sort(function (a,b) {
    return a - b;
})
console.log(arr);

var arr = [1,2].sort((a,b) => a - b);
console.log(arr);


//============================
//Symbol 第七种数据类型
//表示独一无二的值
//举例
//属性覆盖
let obj = {name: "liu"};

obj.name = function () {
    console.log("wang");
}
obj.name();

//使用symbol 给对象添加属性
let obj = {name: "liu"};

let name = Symbol();
obj[name] = function () {
    console.log("wang");
}

console.log(obj.name);
obj[name]();


//每一次调用symboi 都是不同的值

//=== 和 == 的区别

// let a = Symbol();
// let b = Symbol();
// console.log(a === b);

//==（等于）与 ===（恒等于）的区别
//==（等于）
// 1、如果两个值类型相同，进行 == 比较。
// 2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
// a、如果一个是null、一个是undefined，那么[相等]。
// b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
// c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
// d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。


// console.log({} == "abc");
// console.log("1" == 1);
// console.log("abc" == 'abc');
// let a = null;
// console.log(a == undefined);
//
// console.log(true == "1");

//===（恒等于）
// 1、如果类型不同，就[不相等]
// 2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
// 3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
// 4、如果两个值都是true，或者都是false，那么[相等]。
// 5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
// 6、如果两个值都是null，或者都是undefined，那么[相等]。

// console.log("1" === 1);


//class 关键字
function User(name,age) {
    this.name = name;
    this.age = age;
}
//prototype
User.prototype.printName = function () {
    console.log(this.name);
}


//class 语法糖 添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会.
class User {
    //构造函数
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }

    printName() {
        console.log(this.name);
    }
}

let test = new User("testName","26");
test.myName();


console.log(typeof User);

//事实上,类的所有方法都定义在原型上的


//继承
class Point {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return "x = " + this.x + ",y = " + this.y;
    }
}

//继承
class My3DPoint extends Point {
    constructor(x,y,z) {
        super(x,y);
        this.z = z;
    }

    toString() {
        return "3D : " + super.toString() + ",z = " + this.z;
    }
}

//调用
let p1 = new My3DPoint(20,30,40);
console.log(p1.toString());

//静态
var count = 0;
class My3DPoint extends Point {
    constructor(x,z = " + this.z;
    }

    static count() {
        return count++;
    }
}

//调用
let p1 = new My3DPoint(20,40);

console.log(My3DPoint.count());
console.log(My3DPoint.count());
console.log(My3DPoint.count());


//new.target
//根据new.target是否返回undefined，来判断构造函数是怎么调用的
 function Person(name) {
 if (new.target !== undefined) {
 this.name = name;
 } else {
 throw new Error('必须使用new生成实例');
 }
 }

 // 另一种写法
 function Person(name) {
 if (new.target === Person) {
 this.name = name;
 } else {
 throw new Error('必须使用new生成实例');
 }
 }

 var p1 = new Person('张三'); // 正确
 var p2 = Person.call(person,'张三');  // 报错


//原型继承
//父类型
function SupType() {
 this.flag = true;
 }

 SupType.prototype.getFlag = function () {
 return this.flag;
 }


 //子类型
 function SubType() {
 this.subFlag = true;
 }
 //有点像多态
 SubType.prototype = new SupType();

 //拷贝过程（可以这么理解）
 //new SuperType() -> SubType.prototype -> s1
 //检查是否继承了父类型的属性
 var s1 = new SubType();
 console.log(s1.getFlag());


//原型继承的问题

function SuperType() {
 this.x = 10;
 this.color = ["red","green","blue"];
 }

 SuperType.prototype.getXX = function () {
 return "xx";
 }


 //子类型
 function SubType() {
 this.subFlag = false;
 }


 SubType.prototype = new SuperType();

 var subType = new SubType();
 subType.color.push("white");
 console.log(subType.color);


 var subType2 = new SubType();
 console.log(subType2.color);

//继承 原因原型共享
//原型的问题：当原型包含引用类型的属性时，这些属性会被所有实例共享


//构造函数继承 解决原型对象上面 属性共享问题
function SuperType() {
    this.colors = ["red","blue"];
}

function SubType() {
    //继承属性
    SuperType.call(this);//独立内存
    //相当于
    /*function SuperType(){ s1.colors = ["red","green","blue"]; }*/
}

var s1 = new SubType();
s1.colors.push("white");
console.log(s1.colors);

var s2 = new SubType();
console.log(s2.colors);
//也有问题 复用问题


//组合继承
//原型+构造函数继承 jquery 主流框架基本用的都是

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue"];
}

SuperType.prototype.sayHi = function () {
    console.log("sayHi");
}


function SubType(name,age) {
    //继承属性
    SuperType.call(this,name);
    this.age = age;
}

//继承函数
SubType.prototype = new SuperType();
//构造函数不能错 constructor判断，当前对象由哪一个构造函数实例化出来的
SubType.prototype.constructor = SubType;

//子类自己的函数
SubType.prototype.sayAge = function () {
    console.log(this.age);
}

var s1 = new SubType("jack",20);
s1.sayHi();
s1.sayAge();
s1.colors.push("white");
console.log(s1.colors);
// console.log(s1);

var s2 = new SubType("jason",20);
console.log(s2.colors);

//根据constructor判断，当前对象由哪一个构造函数实例化出来的 \
// console.log(s2.constructor === SubType);
// console.log(s2.constructor === SuperType);
从零开始 React Native (2) ES6面向对象编程

猜你在找的React相关文章
