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

前端之家收集整理的这篇文章主要介绍了从零开始 React Native (2) ES6面向对象编程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

主要知识点:

  1. 模板字符串
  2. 箭头函数
  3. 解构赋值
  4. Symbol 第七种数据类
  5. class 关键字 语法糖
  6. 继承 (原型继承 原型继承的问题)(构造函数继承 )(组合继承)

下面都是代码样例 看看能打印什么

  1. /** * Created by liuml on 2017/4/7. */
  2. //模板字符串
  3. let name = "liu";
  4. let age = 26;
  5. let str = name + " is " + age + " year old.";
  6.  
  7. //嵌入变量 这里`` 是1左边的键
  8. let str1 = `${name} is ${age} year old.`;
  9.  
  10. console.log(str);
  11. console.log(str1);
  12.  
  13.  
  14. //保持原来的字符串格式
  15. let str2 = `I love
  16. you`;
  17. console.log(str2);
  18.  
  19. //箭头函数
  20. let func = function (n) {
  21. console.log(n)
  22. }
  23. func(2);
  24.  
  25.  
  26. //=>代表function
  27. let func1 = n => console.log(n);
  28. func1(1);
  29.  
  30.  
  31. let func2 = function (n) {
  32. return n * 2;
  33. }
  34.  
  35. //自动返回值
  36.  
  37. let func2 = n => n * 2;
  38.  
  39. console.log(func2(2));
  40.  
  41. //多个参数情况
  42. let func3 = (a,b) => {
  43. a += 3;
  44. return a + b;
  45. };
  46.  
  47. console.log(func3(3,4));
  48.  
  49.  
  50. // 箭头函数返回对象
  51. var initobj = id => ({id: id,name: "default"});
  52. console.log(initobj(2));
  53.  
  54. //解构赋值
  55. //拼接得到完整的名称
  56. let full = ({first,last}) => first + "_" + last;
  57.  
  58. console.log(full({first: "begin",last: "end"}));
  59.  
  60. //map
  61. var arr = [1,2,3,4].map(function (n) {
  62. return n * 2;
  63. })
  64.  
  65. console.log(arr);
  66.  
  67. var arr = [1,4].map(n => n * 2);
  68. console.log(arr);
  69.  
  70. //排序 升序
  71. var arr = [1,4,5,2].sort(function (a,b) {
  72. return a - b;
  73. })
  74. console.log(arr);
  75.  
  76. var arr = [1,2].sort((a,b) => a - b);
  77. console.log(arr);
  78.  
  79.  
  80. //============================
  81. //Symbol 第七种数据类型
  82. //表示独一无二的值
  83. //举例
  84. //属性覆盖
  85. let obj = {name: "liu"};
  86.  
  87. obj.name = function () {
  88. console.log("wang");
  89. }
  90. obj.name();
  91.  
  92. //使用symbol 给对象添加属性
  93. let obj = {name: "liu"};
  94.  
  95. let name = Symbol();
  96. obj[name] = function () {
  97. console.log("wang");
  98. }
  99.  
  100. console.log(obj.name);
  101. obj[name]();
  102.  
  103.  
  104. //每一次调用symboi 都是不同的值
  105.  
  106. //=== 和 == 的区别
  107.  
  108. // let a = Symbol();
  109. // let b = Symbol();
  110. // console.log(a === b);
  111.  
  112. //==(等于)与 ===(恒等于)的区别
  113. //==(等于)
  114. // 1、如果两个值类型相同,进行 == 比较。
  115. // 2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
  116. // a、如果一个是null、一个是undefined,那么[相等]。
  117. // b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
  118. // c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
  119. // d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。
  120.  
  121.  
  122. // console.log({} == "abc");
  123. // console.log("1" == 1);
  124. // console.log("abc" == 'abc');
  125. // let a = null;
  126. // console.log(a == undefined);
  127. //
  128. // console.log(true == "1");
  129.  
  130. //===(恒等于)
  131. // 1、如果类型不同,就[不相等]
  132. // 2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
  133. // 3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
  134. // 4、如果两个值都是true,或者都是false,那么[相等]。
  135. // 5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
  136. // 6、如果两个值都是null,或者都是undefined,那么[相等]。
  137.  
  138. // console.log("1" === 1);
  139.  
  140.  
  141. //class 关键字
  142. function User(name,age) {
  143. this.name = name;
  144. this.age = age;
  145. }
  146. //prototype
  147. User.prototype.printName = function () {
  148. console.log(this.name);
  149. }
  150.  
  151.  
  152. //class 语法糖 添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会.
  153. class User {
  154. //构造函数
  155. constructor(name,age) {
  156. this.name = name;
  157. this.age = age;
  158. }
  159.  
  160. printName() {
  161. console.log(this.name);
  162. }
  163. }
  164.  
  165. let test = new User("testName","26");
  166. test.myName();
  167.  
  168.  
  169. console.log(typeof User);
  170.  
  171. //事实上,类的所有方法都定义在原型上的
  172.  
  173.  
  174. //继承
  175. class Point {
  176. constructor(x,y) {
  177. this.x = x;
  178. this.y = y;
  179. }
  180.  
  181. toString() {
  182. return "x = " + this.x + ",y = " + this.y;
  183. }
  184. }
  185.  
  186. //继承
  187. class My3DPoint extends Point {
  188. constructor(x,y,z) {
  189. super(x,y);
  190. this.z = z;
  191. }
  192.  
  193. toString() {
  194. return "3D : " + super.toString() + ",z = " + this.z;
  195. }
  196. }
  197.  
  198. //调用
  199. let p1 = new My3DPoint(20,30,40);
  200. console.log(p1.toString());
  201.  
  202. //静态
  203. var count = 0;
  204. class My3DPoint extends Point {
  205. constructor(x,z = " + this.z;
  206. }
  207.  
  208. static count() {
  209. return count++;
  210. }
  211. }
  212.  
  213. //调用
  214. let p1 = new My3DPoint(20,40);
  215.  
  216. console.log(My3DPoint.count());
  217. console.log(My3DPoint.count());
  218. console.log(My3DPoint.count());
  219.  
  220.  
  221. //new.target
  222. //根据new.target是否返回undefined,来判断构造函数是怎么调用
  223. function Person(name) {
  224. if (new.target !== undefined) {
  225. this.name = name;
  226. } else {
  227. throw new Error('必须使用new生成实例');
  228. }
  229. }
  230.  
  231. // 另一种写法
  232. function Person(name) {
  233. if (new.target === Person) {
  234. this.name = name;
  235. } else {
  236. throw new Error('必须使用new生成实例');
  237. }
  238. }
  239.  
  240. var p1 = new Person('张三'); // 正确
  241. var p2 = Person.call(person,'张三'); // 报错
  242.  
  243.  
  244. //原型继承
  245. //父类
  246. function SupType() {
  247. this.flag = true;
  248. }
  249.  
  250. SupType.prototype.getFlag = function () {
  251. return this.flag;
  252. }
  253.  
  254.  
  255. //子类型
  256. function SubType() {
  257. this.subFlag = true;
  258. }
  259. //有点像多态
  260. SubType.prototype = new SupType();
  261.  
  262. //拷贝过程(可以这么理解)
  263. //new SuperType() -> SubType.prototype -> s1
  264. //检查是否继承了父类型的属性
  265. var s1 = new SubType();
  266. console.log(s1.getFlag());
  267.  
  268.  
  269. //原型继承的问题
  270.  
  271. function SuperType() {
  272. this.x = 10;
  273. this.color = ["red","green","blue"];
  274. }
  275.  
  276. SuperType.prototype.getXX = function () {
  277. return "xx";
  278. }
  279.  
  280.  
  281. //子类型
  282. function SubType() {
  283. this.subFlag = false;
  284. }
  285.  
  286.  
  287. SubType.prototype = new SuperType();
  288.  
  289. var subType = new SubType();
  290. subType.color.push("white");
  291. console.log(subType.color);
  292.  
  293.  
  294. var subType2 = new SubType();
  295. console.log(subType2.color);
  296.  
  297. //继承 原因原型共享
  298. //原型的问题:当原型包含引用类型的属性时,这些属性会被所有实例共享
  299.  
  300.  
  301. //构造函数继承 解决原型对象上面 属性共享问题
  302. function SuperType() {
  303. this.colors = ["red","blue"];
  304. }
  305.  
  306. function SubType() {
  307. //继承属性
  308. SuperType.call(this);//独立内存
  309. //相当于
  310. /*function SuperType(){ s1.colors = ["red","green","blue"]; }*/
  311. }
  312.  
  313. var s1 = new SubType();
  314. s1.colors.push("white");
  315. console.log(s1.colors);
  316.  
  317. var s2 = new SubType();
  318. console.log(s2.colors);
  319. //也有问题 复用问题
  320.  
  321.  
  322. //组合继承
  323. //原型+构造函数继承 jquery 主流框架基本用的都是
  324.  
  325. function SuperType(name) {
  326. this.name = name;
  327. this.colors = ["red","blue"];
  328. }
  329.  
  330. SuperType.prototype.sayHi = function () {
  331. console.log("sayHi");
  332. }
  333.  
  334.  
  335. function SubType(name,age) {
  336. //继承属性
  337. SuperType.call(this,name);
  338. this.age = age;
  339. }
  340.  
  341. //继承函数
  342. SubType.prototype = new SuperType();
  343. //构造函数不能错 constructor判断,当前对象由哪一个构造函数实例化出来的
  344. SubType.prototype.constructor = SubType;
  345.  
  346. //子类自己的函数
  347. SubType.prototype.sayAge = function () {
  348. console.log(this.age);
  349. }
  350.  
  351. var s1 = new SubType("jack",20);
  352. s1.sayHi();
  353. s1.sayAge();
  354. s1.colors.push("white");
  355. console.log(s1.colors);
  356. // console.log(s1);
  357.  
  358. var s2 = new SubType("jason",20);
  359. console.log(s2.colors);
  360.  
  361. //根据constructor判断,当前对象由哪一个构造函数实例化出来的 \
  362. // console.log(s2.constructor === SubType);
  363. // console.log(s2.constructor === SuperType);

猜你在找的React相关文章